/* ============================================================
   我的初一生活 — UI 样式（浅色校园风）
   ============================================================ */
:root{
  --ink:#1f2d3d;
  --ink-2:#41566e;
  --ink-3:#7a8ea6;
  --line:#dfe6ee;
  --paper:#ffffff;
  --paper-2:#f5f8fb;
  --bg:#eaf1f7;
  --brand:#1f7a6b;         /* 校园墨绿 */
  --brand-2:#2fa08c;
  --brand-soft:#e2f2ee;
  --accent:#c0392b;        /* 校徽红 */
  --gold:#d5a021;
  --sky:#3f86c9;
  --shadow:0 10px 34px rgba(31,45,61,.16);
  --shadow-s:0 4px 14px rgba(31,45,61,.10);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
#stage{position:fixed;inset:0}
canvas{display:block}
.hidden{display:none !important}

/* ---------- 加载页 ---------- */
.screen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
#loading{background:linear-gradient(160deg,#f3f8fb 0%,#e3eff1 55%,#dceaf3 100%)}
.load-card{width:420px;text-align:center;background:var(--paper);border-radius:20px;padding:34px 30px 30px;box-shadow:var(--shadow);border:1px solid var(--line)}
.load-crest{display:inline-block;font-size:12px;letter-spacing:3px;color:var(--brand);border:1px solid var(--brand);border-radius:999px;padding:3px 12px;margin-bottom:14px}
.load-card h1{margin:6px 0 4px;font-size:27px;letter-spacing:3px;color:var(--ink)}
.load-sub{margin:0 0 20px;font-size:12.5px;color:var(--ink-3)}
.bar{height:8px;border-radius:99px;background:#eef3f7;overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#37a08b,#7fc9a8);transition:width .35s ease}
.load-tip{margin-top:12px;font-size:12px;color:var(--ink-3);height:16px}

/* ---------- 标题页 ---------- */
#title{background:
   radial-gradient(1200px 600px at 78% 18%, #fdf6e3 0%, rgba(253,246,227,0) 62%),
   linear-gradient(150deg,#ffffff 0%,#eef5f8 48%,#e2edf4 100%)}
.title-inner{display:flex;gap:44px;width:min(1120px,92vw);align-items:center}
.title-left{flex:1 1 520px}
.crest{display:inline-block;font-size:12px;letter-spacing:2.5px;color:var(--accent);border:1px solid #ecc9c4;background:#fdf2f0;border-radius:999px;padding:4px 13px}
.title-left h1{font-size:56px;margin:16px 0 10px;letter-spacing:10px;color:var(--ink);text-shadow:0 3px 0 #fff}
.tagline{font-size:14.5px;line-height:2;color:var(--ink-2);margin:0 0 26px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-row.center{justify-content:center}
.btn{
  font:inherit;cursor:pointer;border-radius:11px;padding:11px 22px;font-size:14.5px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  transition:.18s;box-shadow:var(--shadow-s)
}
.btn:hover{transform:translateY(-1px);border-color:#c9d7e4;color:var(--ink)}
.btn.primary{background:linear-gradient(135deg,#2a8d7c,#1f7a6b);color:#fff;border-color:transparent}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;box-shadow:none}
.version{margin-top:22px;font-size:11.5px;color:var(--ink-3)}

.title-right{flex:0 0 330px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.pick-title{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.pick-row{display:flex;gap:12px}
.pick-card{flex:1;border:2px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;text-align:center;transition:.18s;background:var(--paper-2)}
.pick-card img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.pick-card span{display:block;font-size:12.5px;padding:6px 0;color:var(--ink-2)}
.pick-card:hover{transform:translateY(-2px)}
.pick-card.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pick-note{font-size:11px;color:var(--ink-3);margin:10px 0 12px;text-align:center}
.roster{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.roster img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;border:1px solid var(--line)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:30}
.hud-box{background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);backdrop-filter:blur(6px)}
#hudTop{position:absolute;left:16px;top:16px;display:flex;flex-direction:column;gap:10px;width:280px}
.hud-level{padding:12px 14px 10px}
.hl-day{font-size:11.5px;color:var(--accent);letter-spacing:1.5px;font-weight:700}
.hl-title{font-size:16px;font-weight:700;margin:3px 0 8px;color:var(--ink)}
.hl-prog{height:6px;border-radius:99px;background:#eef3f7;overflow:hidden}
.hl-prog>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#37a08b,#8fd3b4);transition:width .3s}
.hud-tasks{padding:11px 14px 12px}
.hud-cap{font-size:11px;color:var(--ink-3);letter-spacing:1px;margin-bottom:7px;display:flex;justify-content:space-between}
.hud-tasks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hud-tasks li{font-size:13px;color:var(--ink-2);display:flex;gap:8px;line-height:1.45}
.hud-tasks li>b{flex:0 0 15px;height:15px;margin-top:2px;border-radius:50%;border:1.5px solid #c3d0dd;font-size:9px;display:flex;align-items:center;justify-content:center;color:transparent}
.hud-tasks li.done{color:var(--ink-3);text-decoration:line-through}
.hud-tasks li.done>b{background:var(--brand);border-color:var(--brand);color:#fff}
.hud-tasks li.cur{color:var(--ink);font-weight:600}
.hud-tasks li.cur>b{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

#hudRight{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:10px;width:176px;align-items:stretch}
.stat-box{padding:10px 12px}
.stat{display:flex;align-items:center;gap:7px;margin:5px 0;font-size:11.5px;color:var(--ink-2)}
.stat b{flex:0 0 26px;font-weight:500}
.stat i{flex:1;height:5px;border-radius:99px;background:#eef3f7;overflow:hidden;display:block}
.stat s{display:block;height:100%;width:0;background:linear-gradient(90deg,#5aa9e6,#2fa08c);text-decoration:none;transition:width .4s}
.mini-box{padding:8px}
#minimap{width:160px;height:160px;display:block;border-radius:9px;background:#f0f5f9}
.mini-label{text-align:center;font-size:11px;color:var(--ink-3);margin-top:4px}
.clock-box{padding:9px 12px;text-align:center}
#clock{font-size:19px;font-weight:700;letter-spacing:1px;color:var(--ink)}
.weather{font-size:11px;color:var(--ink-3);margin-top:2px}

#interactTip{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);
  background:rgba(31,45,61,.86);color:#fff;border-radius:10px;padding:8px 16px;font-size:13.5px;display:flex;gap:8px;align-items:center}
#interactTip kbd{background:#fff;color:var(--ink);border-radius:5px;padding:1px 7px;font:inherit;font-weight:700}
#toast{position:absolute;left:50%;top:80px;transform:translateX(-50%);display:flex;flex-direction:column;gap:7px;align-items:center}
#lateWarn{position:absolute;left:50%;top:100px;transform:translateX(-50%);
  padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap;
  color:#fff;background:rgba(190,32,26,.88);border:1px solid rgba(255,150,140,.8);
  box-shadow:0 6px 18px rgba(150,20,16,.38);z-index:7;pointer-events:none;
  animation:latePulse 1.05s ease-in-out infinite}
@keyframes latePulse{0%,100%{opacity:.72;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.04)}}
.toast-i{background:rgba(255,255,255,.96);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:9px;padding:8px 16px;font-size:13px;color:var(--ink);box-shadow:var(--shadow-s);animation:tin .28s ease}
.toast-i.warn{border-left-color:var(--gold)}
.toast-i.good{border-left-color:var(--brand-2)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#subtitle{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:760px;text-align:center;
  background:rgba(31,45,61,.8);color:#fff;font-size:15px;line-height:1.7;padding:11px 22px;border-radius:11px}
#hudHint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11.5px;color:var(--ink-3);
  background:rgba(255,255,255,.8);border-radius:99px;padding:5px 16px;border:1px solid var(--line)}

/* ---------- 对话框 ---------- */
#dialog{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;padding-bottom:44px;
  background:linear-gradient(to top,rgba(20,30,40,.35),rgba(20,30,40,0) 42%)}
.dlg-card{display:flex;width:min(940px,94vw);background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;animation:up .26s ease}
@keyframes up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.dlg-portrait{flex:0 0 188px;background:linear-gradient(160deg,#eef5f8,#e2eef2);position:relative}
.dlg-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.dlg-portrait:after{content:"";position:absolute;inset:0;box-shadow:inset -22px 0 30px -18px rgba(0,0,0,.14)}
.dlg-body{flex:1;padding:18px 22px 14px;display:flex;flex-direction:column;min-height:212px}
.dlg-name{font-size:19px;font-weight:700;color:var(--ink)}
.dlg-role{font-size:11.5px;color:var(--brand);margin:3px 0 12px;letter-spacing:.5px}
.dlg-text{font-size:15.5px;line-height:1.95;color:var(--ink-2);flex:1;min-height:62px}
.dlg-options{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.dlg-options button{font:inherit;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--paper-2);
  border-radius:10px;padding:9px 14px;font-size:14px;color:var(--ink-2);transition:.15s}
.dlg-options button:hover{background:var(--brand-soft);border-color:#9fd0c6;color:var(--ink)}
.dlg-foot{font-size:11px;color:var(--ink-3);text-align:right;margin-top:10px}

/* ---------- 通用面板 ---------- */
#panel{position:fixed;inset:0;z-index:71;display:flex;align-items:center;justify-content:center;background:rgba(24,36,48,.34)}
.panel-card{width:min(760px,92vw);max-height:82vh;background:var(--paper);border-radius:18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line);font-weight:700}
.panel-head .x{border:0;background:transparent;font-size:23px;line-height:1;color:var(--ink-3);cursor:pointer}
.panel-body{padding:18px 22px 24px;overflow:auto;font-size:14px;color:var(--ink-2);line-height:1.85}
.panel-body h3{margin:0 0 10px;font-size:15px;color:var(--ink)}
.panel-body h4{margin:16px 0 6px;font-size:13.5px;color:var(--brand)}
.panel-body table{width:100%;border-collapse:collapse;font-size:13px}
.panel-body th,.panel-body td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.panel-body th{background:var(--paper-2);color:var(--ink-2)}
.panel-body .kv{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.panel-body .kv b{flex:0 0 118px;color:var(--ink-3);font-weight:500}
.map-wrap{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.map-wrap canvas{width:100%;height:auto;display:block}

/* ---------- 课程表 ---------- */
.panel-card.wide{width:min(1040px,96vw)}
.tt-head{text-align:center;margin-bottom:12px}
.tt-head h3{margin:0 0 6px;font-size:18px;color:var(--ink);letter-spacing:1px}
.tt-motto{font-size:16px;font-weight:700;color:var(--accent);letter-spacing:1px}
.tt-sub{font-size:12px;color:var(--ink-3);margin-top:4px}
.tt-meta{display:flex;justify-content:center;gap:18px;margin-top:8px}
.tt-meta span{font-size:12px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:99px;padding:3px 12px}
table.timetable{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;margin-top:6px}
table.timetable th,table.timetable td{border:1px solid #dde6ef;padding:6px 4px;text-align:center;line-height:1.35}
table.timetable thead th{background:linear-gradient(180deg,#3f86c9,#2f6cb4);color:#fff;font-weight:700;font-size:12.5px;padding:8px 4px}
table.timetable th.c-p,table.timetable td.p{width:74px}
table.timetable th.c-t,table.timetable td.t{width:104px}
table.timetable td.p{background:#eef3f9;font-weight:700;color:var(--ink);white-space:nowrap}
table.timetable td.t{background:#f7fafd;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}
table.timetable td.none{color:#b9c4d0;background:#fafcfe}
table.timetable td .sj{display:block;color:var(--ink);font-weight:600}
table.timetable td .sn{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}
table.timetable tr.br td{background:#f1f7ee;color:#4d7a52}
table.timetable tr.br td.p{background:#e6f1e0;color:#3f6b45}
table.timetable tr.br td.t{background:#f1f7ee;color:#5c8a60}
table.timetable td.note{text-align:left;padding-left:12px;font-size:11.5px}
.tt-foot{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:12px}

/* 时钟联动：状态条 + 当前节次 / 当前星期高亮 */
.tt-status{margin:10px 0 4px;padding:7px 12px;border-radius:10px;background:#fff8e6;border:1px solid #f0dcae;
  font-size:12.5px;color:var(--ink-2);text-align:center;line-height:1.6}
.tt-status.sub{background:#eef6fb;border-color:#d3e5f2;color:var(--ink-3);margin-top:0}
.tt-status b{color:var(--ink)}
.tt-subj{font-style:normal;color:var(--accent);font-weight:700}
table.timetable .none{color:#b9c4d0}
table.timetable th.daycol{background:linear-gradient(180deg,#2f6cb4,#245a99);box-shadow:inset 0 -3px 0 #ffd479}
table.timetable td.daycol{box-shadow:inset 0 0 0 1px rgba(47,108,180,.28)}
table.timetable tr.now td.p,table.timetable tr.now td.t{background:#fff2d2;color:#8a5a10}
table.timetable tr.now td.note{background:#f4f9ea;color:#4d7a52}
table.timetable td.nowcell{outline:2px solid var(--accent);outline-offset:-2px}
table.timetable td.nowcell .sj{color:#8a2118}

/* ---------- 小游戏 ---------- */
#mini{position:fixed;inset:0;z-index:72;display:flex;align-items:center;justify-content:center;background:rgba(24,36,48,.42)}
.mini-card{width:min(660px,92vw);background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:24px 26px 22px;border:1px solid var(--line)}
.mini-card h3{margin:0 0 6px;font-size:19px;color:var(--ink)}
.mini-card .mini-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.q-text{font-size:16px;line-height:1.8;color:var(--ink);margin-bottom:14px}
.opt{display:block;width:100%;text-align:left;font:inherit;font-size:14.5px;padding:12px 16px;margin-bottom:9px;border-radius:11px;
  border:1px solid var(--line);background:var(--paper-2);cursor:pointer;color:var(--ink-2);transition:.15s}
.opt:hover{background:var(--brand-soft);border-color:#9fd0c6}
.opt.right{background:#e4f6ec;border-color:#5abe8c;color:#1c6b43}
.opt.wrong{background:#fdeceb;border-color:#e79c95;color:#a02c22}
.opt:disabled{cursor:default}
.power-track{height:26px;border-radius:99px;background:#eef3f7;position:relative;overflow:hidden;border:1px solid var(--line)}
.power-track>i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7fd0b7,#37a08b)}
.power-zone{position:absolute;top:0;bottom:0;background:rgba(213,160,33,.28);border-left:2px dashed #d5a021;border-right:2px dashed #d5a021}
.power-pin{position:absolute;top:-3px;bottom:-3px;width:3px;background:#1f2d3d;border-radius:2px}
.keys-row{display:flex;gap:10px;justify-content:center;margin:16px 0}
.key-chip{width:56px;height:56px;border-radius:12px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;color:var(--ink-3);background:var(--paper-2);transition:.15s}
.key-chip.now{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);transform:scale(1.08)}
.key-chip.ok{background:#e4f6ec;border-color:#5abe8c;color:#1c6b43}
.key-chip.bad{background:#fdeceb;border-color:#e79c95;color:#a02c22}
.mini-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12.5px;color:var(--ink-3)}
.mini-gauge{height:12px;border-radius:99px;background:#eef3f7;overflow:hidden;margin:8px 0 4px;border:1px solid var(--line)}
.mini-gauge>i{display:block;height:100%;width:50%;background:#5aa9e6}
.mini-gauge.hit>i{background:#37a08b}
.align-track{height:30px;border-radius:9px;background:#eef3f7;position:relative;border:1px solid var(--line);overflow:hidden}
.align-target{position:absolute;top:0;bottom:0;background:rgba(55,160,139,.22);border-left:2px solid #37a08b;border-right:2px solid #37a08b}
.align-mark{position:absolute;top:-4px;bottom:-4px;width:4px;background:#c0392b;border-radius:3px}
.countdown{font-size:52px;font-weight:700;text-align:center;color:var(--brand);letter-spacing:2px}

/* ---------- 结算 ---------- */
#result{position:fixed;inset:0;z-index:74;display:flex;align-items:center;justify-content:center;background:rgba(24,36,48,.44)}
.res-card{position:relative;width:min(560px,92vw);background:var(--paper);border-radius:20px;padding:30px 34px 26px;box-shadow:var(--shadow);
  text-align:center;border:1px solid var(--line);animation:up .3s ease}
.res-stamp{position:absolute;right:26px;top:22px;width:66px;height:66px;border:2.5px solid var(--accent);border-radius:50%;
  color:var(--accent);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:rotate(-13deg);opacity:.86;letter-spacing:1px}
.res-card h2{margin:6px 0 10px;font-size:25px;color:var(--ink);letter-spacing:2px}
.res-card p{font-size:14px;color:var(--ink-2);line-height:1.85;margin:0 0 18px}
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.res-cell{background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:11px 6px}
.res-cell b{display:block;font-size:22px;color:var(--brand);font-weight:700}
.res-cell span{font-size:11.5px;color:var(--ink-3)}
.res-quote{font-size:13px;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:14px;margin-bottom:18px;line-height:1.8}

/* ---------- 暂停 ---------- */
#pause{position:fixed;inset:0;z-index:73;display:flex;align-items:center;justify-content:center;background:rgba(24,36,48,.44)}
.pause-card{width:300px;background:var(--paper);border-radius:18px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;border:1px solid var(--line)}
.pause-card h2{margin:0 0 8px;text-align:center;font-size:19px;color:var(--ink);letter-spacing:3px}
.pause-card .btn{width:100%;text-align:center}
.pause-tip{font-size:11px;color:var(--ink-3);text-align:center;margin-top:6px}

@media (max-width:980px){
  .title-inner{flex-direction:column;gap:24px}
  .title-left h1{font-size:38px;letter-spacing:6px}
  #hudRight{display:none}
}


/* ============================================================
   ★ 2026-10-30 欢迎页 + 预加载页 改版 V1「开学第一天」
   设计语言：青春动画标题画面（漫画墨线 + 贴纸 + 实体按键）
   来源：设计方交付《V1 我的初一生活·欢迎页改版.html》及其配套 CSS
   ——
   合并时的四处工程性修正（其余原样）：
     ① body 字体不引 Google Fonts 外链（国内不可用）→ 用本地子集字体
     ② .screen 保留原 display:flex 居中（设计稿版本缺了会塌版）
     ③ .btn / .btn-row 限定 #title 作用域 —— 否则会连带改掉
        暂停菜单与结算屏的按钮样式（不在本次改版范围内）
     ④ 补 .x-cloud 云朵图形（设计稿只给了尺寸动画，没给图 → 云不可见）
   ============================================================ */
/* ============================================================
   本地字体：ZCOOL KuaiLe（站酷快乐体）—— 中文手写标题体
   ★ 2026-10-30：设计稿用 Google Fonts 外链，国内不可用 → 改本地化。
     子集只含欢迎页/预加载页用到的 228 个字符 → 仅 24KB。
     若新增中文文案出现缺字（回退系统黑体），把新字补进子集重下即可。
   ============================================================ */
@font-face{
  font-family:'ZCOOL KuaiLe';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ZCOOLKuaiLe-subset.woff2') format('woff2');
  unicode-range:U+a7, U+b7, U+2014, U+2018-2019, U+201c-201d, U+2026, U+2192, U+23f1, U+23f3, U+2460-2464, U+25a0-25a1, U+25b2, U+25b6, U+25bc, U+25c0, U+25c6-25c7, U+25cb, U+25cf, U+2605-2606, U+26a1, U+270e-270f, U+2713-2715, U+2718, U+2726, U+3000-3002, U+300a-300f, U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e14, U+4e24, U+4e2a, U+4e2d, U+4e3a-4e3b, U+4e45, U+4e4b, U+4e5d, U+4e5f, U+4e66, U+4e86, U+4e8b, U+4e91-4e92, U+4e94, U+4e9b, U+4ea4, U+4eba, U+4ec5, U+4eca, U+4ecd-4ece, U+4ed6, U+4ee4-4ee5, U+4eec, U+4ef6, U+4efb, U+4efd, U+4f1a, U+4f46, U+4f4d, U+4f55, U+4f5c, U+4f60, U+4f7f, U+4f9b, U+4f9d, U+4fdd, U+4fe1, U+503c, U+505c, U+50cf, U+515c, U+5165, U+5168, U+516d, U+5171, U+5173, U+5176-5177, U+5185, U+518c-518d, U+5199, U+51a0, U+51b2-51b3, U+51c6, U+51fa-51fb, U+5206-5207, U+5212, U+5217, U+521b, U+521d, U+5220, U+5224, U+522b, U+5230, U+5237, U+523b, U+524d, U+529b, U+529f-52a1, U+52a8, U+52ab, U+5305, U+5316, U+533a, U+5341, U+5348, U+5355, U+5361, U+5373, U+539f, U+53cc-53cd, U+53d1, U+53d6, U+53d8, U+53e3, U+53ea, U+53ef-53f0, U+53f3, U+53f7, U+5404, U+5408, U+540c-540e, U+5411, U+5426, U+542b-542c, U+542f, U+5458, U+5468, U+548c, U+54cd, U+55b7, U+5668, U+56de, U+56e0, U+56ed, U+56fd, U+5706, U+5728, U+5730, U+573a, U+5747, U+5757, U+5761, U+578b, U+5851, U+5904, U+5907, U+5916, U+591a, U+591c, U+5927, U+5929, U+5931, U+5934, U+5973, U+5982, U+59cb, U+5b57-5b58, U+5b63, U+5b66, U+5b83, U+5b88-5b89, U+5b8c, U+5b9a, U+5b9e, U+5ba2, U+5bb6, U+5bb9, U+5bc6, U+5bf9, U+5bfc, U+5c04, U+5c06, U+5c0f, U+5c11, U+5c1a, U+5c31, U+5c3d, U+5c40, U+5c42, U+5c4f, U+5c55, U+5c5e, U+5c9b, U+5de5, U+5df2, U+5e08, U+5e38, U+5e76, U+5e8f, U+5e94-5e95, U+5ea6, U+5eca, U+5efa, U+5f00, U+5f0f, U+5f15, U+5f39, U+5f53, U+5f55, U+5f62, U+5f71, U+5f84-5f85, U+5f8b, U+5fae, U+5fbd, U+5fc5, U+5fd8, U+5feb, U+6001, U+6027, U+606f, U+60ac, U+620f-6211, U+6216, U+622a, U+6233, U+6237, U+6240, U+624b, U+624d, U+6253, U+62a4-62a5, U+62ac, U+62c9, U+62d2, U+62df, U+62e5-62e6, U+62e9, U+6301-6302, U+6309, U+6355, U+6362, U+6377, U+6389, U+63a5, U+63d0, U+642d, U+6446, U+6458, U+64cd, U+6536, U+6539, U+653e, U+6548, U+6559, U+6570, U+6574, U+6587, U+65b0, U+65b9, U+65e0, U+65e2, U+65e5, U+65e7, U+65f6, U+660e, U+661f-6620, U+662f, U+6635, U+663e, U+666e-666f, U+6674, U+6682, U+66b4, U+66f4, U+6700, U+6709, U+670d, U+671f, U+672a, U+672c, U+673a, U+6743, U+6761, U+6765, U+677e-677f, U+6784, U+679c, U+67b6, U+67d3, U+67e5, U+6807, U+6821, U+6839, U+6846, U+6863, U+692d, U+697c, U+6a21, U+6b21-6b22, U+6b63, U+6b65, U+6bb5, U+6bcd, U+6bcf, U+6bd4, U+6c34, U+6c60, U+6ca1, U+6cc9, U+6cd5, U+6ce8, U+6d0b, U+6d3b, U+6d4f, U+6d77, U+6df1, U+6e05, U+6e32, U+6e38, U+6e90, U+70b9, U+7167, U+7247-7248, U+724c, U+72b6, U+738b, U+73a9, U+73af-73b0, U+7406, U+751f, U+7528, U+7531, U+7537, U+753b, U+7559, U+7565, U+75d5, U+767b, U+7684, U+7687, U+76d1, U+76d8, U+76f4, U+770b, U+771f, U+7740, U+77e5, U+77f3, U+7801, U+780c, U+786e, U+793a, U+7981, U+79bb, U+79cd, U+79f0, U+7a0b, U+7a7a, U+7acb, U+7ad9, U+7aef, U+7b2c, U+7b49, U+7b56, U+7ba1, U+7c7b, U+7cfb, U+7d20, U+7ea7, U+7ebf, U+7ed3, U+7ed9, U+7edc-7edd, U+7edf, U+7ee7, U+7eed, U+7ef4, U+7f13, U+7f51, U+7f6e, U+8001, U+8005, U+800c, U+80f6, U+80fd, U+811a, U+81ea, U+81f3-81f4, U+8272, U+8282, U+82b1, U+82e5, U+83b7, U+83dc, U+853d, U+85cf, U+884c, U+8868, U+88ab, U+88c5, U+8981, U+89c1, U+89c6, U+89c8, U+89d2, U+89e6, U+8ba2, U+8ba4, U+8ba9, U+8bb0, U+8bbe-8bbf, U+8bd5, U+8bdd, U+8be5, U+8bef, U+8bf4, U+8bf7, U+8bfb, U+8bfe, U+8c01, U+8c03, U+8c61, U+8c8c, U+8d25-8d26, U+8d28, U+8d44, U+8d56, U+8d5b, U+8d70, U+8d77, U+8d85, U+8dc3, U+8dd1, U+8de8, U+8def, U+8df3, U+8eab, U+8f6c, U+8f7d, U+8f83, U+8f93, U+8fb9, U+8fc7, U+8fce, U+8fd0, U+8fd9, U+8fdb-8fdc, U+8fde, U+8ff9, U+8ffd, U+9000, U+9002, U+9009, U+901a, U+9053, U+90e8, U+90fd, U+91cc-91cd, U+91cf, U+949f, U+94ae, U+94c1, U+94fa, U+94fe, U+9519, U+952e, U+957f, U+95e8, U+95ed-95ee, U+95f4, U+95f8, U+9605, U+9634, U+9636, U+9644, U+9650, U+9664, U+9669, U+9690, U+9694, U+96c6, U+96ea, U+96f6, U+9700, U+9732, U+9752, U+975e, U+9762, U+9875, U+987b, U+9884, U+98ce, U+9996, U+9a71, U+9a7b, U+9a8c, U+9ad8, U+9ed8, U+ff08-ff09, U+ff0c, U+ff1a-ff1b, U+ff1f, U+1f4f6, U+1f514;
}
/* ============================================================
   《我的初一生活》预加载页 + 欢迎页 改版样式 —— 「开学第一天」
   ------------------------------------------------------------
   设计语言：青春动画标题画面（漫画墨线 + 贴纸 + 实体按键）
   用法：用本文件中【§预加载页】【§欢迎页】两段规则，
        替换 web/css/style.css 里对应的两屏样式；:root 变量并集合并。
   契约：不改任何 id / class / data-gender，只改样式与装饰元素。
   ============================================================ */

/* ---------- 令牌（与原 :root 并集，色值可整段替换） ---------- */
:root{
  --ink:#1f2d3d;
  --ink-2:#41566e;
  --ink-3:#7a8ea6;
  --line:#dfe6ee;
  --paper:#ffffff;
  --paper-2:#f5f8fb;
  --bg:#eaf1f7;
  --brand:#1f7a6b;         /* 校园墨绿 */
  --brand-2:#2fa08c;
  --brand-deep:#155d51;
  --brand-soft:#e2f2ee;
  --accent:#c0392b;        /* 校徽红 */
  --accent-2:#e05a50;
  --gold:#f0b429;
  --gold-deep:#d5a021;
  --sky:#3f86c9;           /* 晴空蓝 */
  --sky-deep:#2c6da8;
  --sky-soft:#dcefff;
  --sun:#ffd76e;
  --shadow:0 10px 34px rgba(31,45,61,.16);
  --shadow-s:0 4px 14px rgba(31,45,61,.10);
  --hard:6px 6px 0 rgba(31,45,61,.85);          /* 漫画硬阴影 */
  --hard-s:4px 4px 0 rgba(31,45,61,.85);
  --r:14px;
  --font-fun:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{-webkit-font-smoothing:antialiased}
button{font-family:inherit;user-select:none;-webkit-user-select:none}
img{-webkit-user-drag:none;user-select:none}

/* ---------- 屏幕基底（与原 .screen 行为一致） ---------- */
.screen{position:fixed;inset:0;z-index:60;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hidden{display:none !important}

/* ============================================================
   §预加载页 —— 「上坡路」进度条 + 入学路线图
   ============================================================ */
#loading{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(560px 300px at 18% 12%, rgba(255,215,110,.55), transparent 62%),
    radial-gradient(720px 420px at 84% 8%,  rgba(255,255,255,.75), transparent 58%),
    linear-gradient(180deg,#bfe3ff 0%,#d9f0ff 34%,#eef8ff 58%,#fdf6e8 100%);
}
/* 远景天际线 */
#loading::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26vh;
  background:
    linear-gradient(0deg, rgba(31,122,107,.16), transparent 78%),
    repeating-linear-gradient(90deg, rgba(31,45,61,.075) 0 54px, transparent 54px 60px,
      rgba(31,45,61,.05) 60px 96px, transparent 96px 104px) bottom/100% 46% no-repeat;
  -webkit-mask:linear-gradient(0deg,#000 55%,transparent);
          mask:linear-gradient(0deg,#000 55%,transparent);
  pointer-events:none;
}
/* 云（不含右上角登录区） */
.x-cloud{position:absolute;pointer-events:none;opacity:.92;animation:x-drift 46s linear infinite;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 54'%3E%3Cpath d='M22 50c-9 0-16-6-16-14 0-7 6-13 13-14 2-9 10-15 20-15 9 0 17 5 20 13 8 0 15 6 15 14 0 9-7 16-16 16z' fill='%23ffffff'/%3E%3Cpath d='M22 50c-9 0-16-6-16-14 0-7 6-13 13-14 2-9 10-15 20-15' fill='none' stroke='%231f2d3d' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.x-cloud.c1{top:12%;left:6%;width:150px}
.x-cloud.c2{top:26%;right:20%;width:110px;animation-duration:62s;animation-delay:-18s}
.x-cloud.c3{top:58%;left:12%;width:84px;opacity:.6;animation-duration:74s;animation-delay:-40s}
@keyframes x-drift{from{transform:translateX(-8vw)}to{transform:translateX(112vw)}}

.load-card{
  position:relative;width:min(560px,92vw);
  background:var(--paper);
  border:2.5px solid var(--ink);border-radius:20px;
  padding:34px 40px 30px;box-shadow:var(--hard);
  transform:rotate(-.6deg);
  text-align:center;
}
/* 胶带贴纸 */
.x-tape{position:absolute;width:96px;height:26px;border-radius:3px;opacity:.85;pointer-events:none}
.x-tape.t1{top:-13px;left:34px;transform:rotate(-5deg);background:rgba(63,134,201,.38)}
.x-tape.t2{top:-11px;right:44px;transform:rotate(6deg);background:rgba(240,180,41,.42)}

.load-crest{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;
  font-family:var(--font-fun);font-size:14px;letter-spacing:3px;
  padding:5px 14px;border-radius:8px;border:2px solid var(--ink);
  box-shadow:2.5px 2.5px 0 var(--ink);transform:rotate(-1.5deg);
}
.load-card h1{
  margin:14px 0 4px;font-family:var(--font-fun);font-weight:400;
  font-size:44px;letter-spacing:6px;color:var(--ink);line-height:1.15;
}
.load-card h1 em{
  font-style:normal;color:var(--brand);
  text-shadow:2px 2px 0 var(--sky-soft);
}
.load-sub{margin:2px 0 22px;font-size:12.5px;letter-spacing:2px;color:var(--ink-3)}

/* 进度条 = 校园上坡路 */
.bar{
  position:relative;height:26px;border-radius:14px;
  background:#e8eef4;border:2.5px solid var(--ink);
  box-shadow:inset 0 3px 6px rgba(31,45,61,.14);
  overflow:visible;
}
.bar i{
  position:absolute;left:0;top:0;bottom:0;width:0;
  border-radius:12px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 14px, transparent 14px 30px) 0 60%/30px 3px repeat-x,
    linear-gradient(180deg,#57a7e8,#3f86c9);
  background-blend-mode:normal;
  overflow:visible;transition:width .25s ease;
  animation:x-road 1s linear infinite;
}
@keyframes x-road{from{background-position:0 60%,0 0}to{background-position:-30px 60%,0 0}}
/* 骑在进度前沿的纸飞机 */
.bar i::after{
  content:"";position:absolute;right:-17px;top:50%;width:34px;height:34px;
  transform:translateY(-52%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M3 20 30 5l-6 22-8-7z' fill='%23fff' stroke='%231f2d3d' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M16 20l8-7' stroke='%231f2d3d' stroke-width='2'/%3E%3Cpath d='M25 10l3-6 2 5z' fill='%23c0392b'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(2px 3px 0 rgba(31,45,61,.28));
  animation:x-bob 1.1s ease-in-out infinite;
}
@keyframes x-bob{0%,100%{transform:translateY(-56%) rotate(-4deg)}50%{transform:translateY(-46%) rotate(3deg)}}

.load-tip{
  margin-top:16px;font-size:14px;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:8px;min-height:24px;
  background:var(--paper-2);border:1.5px dashed var(--ink-3);
  border-radius:999px;padding:6px 16px;
}
.load-tip::before{
  content:"";width:18px;height:18px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='6' width='12' height='11' rx='2.5' fill='%23f0b429' stroke='%231f2d3d' stroke-width='1.6'/%3E%3Cpath d='M6 6V4.5A1.5 1.5 0 0 1 7.5 3h3A1.5 1.5 0 0 1 12 4.5V6' fill='none' stroke='%231f2d3d' stroke-width='1.6'/%3E%3Cpath d='M15 9h2.2v4H15' fill='%23c0392b' stroke='%231f2d3d' stroke-width='1.4'/%3E%3C/svg%%3E") center/contain no-repeat;
  animation:x-sway 2.2s ease-in-out infinite;
}
@keyframes x-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* 入学路线图（呼应新母题：校门→大台阶→喷泉池→教学楼） */
.x-route{margin-top:18px;pointer-events:none}
.x-route svg{width:100%;height:auto;display:block}


/* ---------- 入学路线图文字（本次新增元素） ---------- */
.x-rl{font-family:var(--font-fun);font-size:13px;letter-spacing:1px;fill:#41566e}
.x-route text{dominant-baseline:middle}
/* ============================================================
   §欢迎页 —— 开学第一天 · 动画标题画面
   ============================================================ */
#title{
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(180deg, rgba(191,227,255,.9) 0%, rgba(217,240,255,.55) 26%, rgba(253,246,232,.42) 62%, rgba(253,246,232,.88) 100%),
    url("assets/scenes/campus-step-in.jpg") center 24%/cover no-repeat;
}
/* 场景缓慢推近 */
#title::before{
  content:"";position:absolute;inset:-4%;
  background:url("assets/scenes/campus-step-in.jpg") center 24%/cover no-repeat;
  animation:x-zoom 26s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes x-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
/* 顶部天光 + 底部暖纸压暗，保证文字可读 */
#title::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 30%),
    radial-gradient(120% 90% at 50% 118%, rgba(253,246,232,.9), transparent 56%);
}

/* —— 装饰层：纸飞机 / 光斑（避开右上角登录区） —— */
.x-plane{position:absolute;pointer-events:none;opacity:.9}
.x-plane.p1{top:16%;left:8%;width:52px;animation:x-fly1 11s ease-in-out infinite}
.x-plane.p2{top:34%;left:44%;width:34px;opacity:.65;animation:x-fly2 14s ease-in-out infinite}
@keyframes x-fly1{
  0%,100%{transform:translate(0,0) rotate(-6deg)}
  30%{transform:translate(90px,-26px) rotate(4deg)}
  60%{transform:translate(190px,14px) rotate(-8deg)}
}
@keyframes x-fly2{
  0%,100%{transform:translate(0,0) rotate(8deg)}
  50%{transform:translate(-140px,-40px) rotate(-6deg)}
}
.x-spark{position:absolute;width:16px;height:16px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='%23f0b429' stroke='%231f2d3d' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:x-twinkle 2.6s ease-in-out infinite;
}
.x-spark.s1{top:22%;left:38%}
.x-spark.s2{top:12%;left:56%;width:11px;animation-delay:.9s}
.x-spark.s3{top:44%;left:4%;width:12px;animation-delay:1.6s}
@keyframes x-twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.35}50%{transform:scale(1.15) rotate(24deg);opacity:1}}

.title-inner{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:56px;
  width:min(1180px,94vw);margin:0 auto;
}

/* ---------- 左列：标题与按钮 ---------- */
.title-left{flex:1.12;min-width:0;padding-bottom:8px}
.crest{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  font-family:var(--font-fun);font-size:15px;letter-spacing:3px;
  padding:6px 16px;border-radius:9px;border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg);
}
.crest::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun);border:1.5px solid var(--ink)}
/* 开学季贴纸（校徽旁） */
.x-day{
  display:inline-block;vertical-align:6px;margin-left:14px;
  font-family:var(--font-fun);font-size:13px;letter-spacing:2px;color:var(--ink);
  background:var(--sun);border:2px solid var(--ink);border-radius:999px;
  padding:4px 12px;box-shadow:2.5px 2.5px 0 var(--ink);
  transform:rotate(3deg);animation:x-wiggle 3.4s ease-in-out infinite;
}
@keyframes x-wiggle{0%,88%,100%{transform:rotate(3deg)}92%{transform:rotate(7deg) scale(1.05)}96%{transform:rotate(0) scale(1.03)}}

.title-left h1{
  position:relative;display:inline-block;
  margin:26px 0 0;font-family:var(--font-fun);font-weight:400;
  font-size:clamp(56px,7.2vw,88px);line-height:1.12;letter-spacing:5px;
  color:#fff;-webkit-text-stroke:2.5px var(--ink);
  text-shadow:5px 5px 0 var(--sky), 10px 10px 0 rgba(31,45,61,.16);
  transform:rotate(-1.2deg);
}
/* 「开学」红印章 */
.x-seal{
  position:absolute;top:-20px;right:-52px;width:58px;height:58px;
  border:3px solid var(--accent);border-radius:10px;color:var(--accent);
  font-family:var(--font-fun);font-size:20px;letter-spacing:2px;
  display:grid;place-items:center;line-height:1.15;
  transform:rotate(10deg);background:rgba(255,255,255,.72);
  box-shadow:2.5px 2.5px 0 rgba(192,57,43,.35);
  animation:x-stamp .5s cubic-bezier(.2,2.4,.4,1) both .35s;
}
@keyframes x-stamp{from{transform:rotate(10deg) scale(2.1);opacity:0}to{transform:rotate(10deg) scale(1);opacity:1}}

.tagline{
  display:inline-block;margin:24px 0 0;padding:12px 18px;
  background:rgba(255,255,255,.9);border:2px solid var(--ink);border-radius:4px;
  box-shadow:var(--hard-s);transform:rotate(-.5deg);
  font-size:15.5px;line-height:1.9;color:var(--ink-2);
}
.tagline b{color:var(--accent);font-weight:700}
/* 纸条胶带 */
.tagline{position:relative}
.tagline::before{
  content:"";position:absolute;top:-12px;left:50%;margin-left:-34px;
  width:68px;height:20px;border-radius:3px;
  background:rgba(47,160,140,.4);transform:rotate(-3deg);
}

/* 今日天气小票根 */
.x-ticket{
  margin-top:16px;display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--ink-2);
  background:rgba(255,255,255,.82);border:1.5px dashed var(--ink-3);
  border-radius:8px;padding:6px 14px;
}
.x-ticket .x-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-2);animation:x-blink 2s infinite}
@keyframes x-blink{0%,100%{opacity:1}50%{opacity:.25}}
.x-ticket b{font-weight:700;color:var(--ink)}

#title .btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}
#title .btn{position:relative;cursor:pointer;border-radius:14px;
  font-family:var(--font-fun);letter-spacing:3px;
  transition:transform .12s ease,box-shadow .12s ease,background .2s;
  border:2.5px solid var(--ink);
}
#title .btn:active{transform:translateY(4px)}
#title .btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

#title .btn.primary{font-size:22px;color:#fff;padding:16px 34px 15px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  box-shadow:0 6px 0 var(--brand-deep),0 10px 18px rgba(21,93,81,.35);
  text-shadow:1.5px 1.5px 0 rgba(21,93,81,.5);
}
#title .btn.primary::before{content:"";display:inline-block;margin-right:12px;vertical-align:-2px;
  width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;
  filter:drop-shadow(1px 1px 0 rgba(21,93,81,.55));
}
#title .btn.primary:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--brand-deep),0 14px 22px rgba(21,93,81,.4)}
#title .btn.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--brand-deep)}

#title .btn{font-size:17px;color:var(--ink);padding:12px 24px 11px;
  background:var(--paper);box-shadow:0 5px 0 rgba(31,45,61,.85),0 8px 14px rgba(31,45,61,.14);
}
#title .btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(31,45,61,.85),0 12px 18px rgba(31,45,61,.18)}
#title .btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(31,45,61,.85)}

#title .btn.ghost{
  font-size:14.5px;padding:9px 18px 8px;letter-spacing:2px;
  background:rgba(255,255,255,.78);color:var(--ink-2);
  border-width:2px;box-shadow:0 3.5px 0 rgba(31,45,61,.7);
}

.version{
  display:inline-block;max-width:100%;
  background:rgba(255,255,255,.88);border:1.5px solid rgba(31,45,61,.22);border-radius:999px;
  padding:4px 12px 3px;box-shadow:2px 2px 0 rgba(31,45,61,.12);backdrop-filter:blur(2px);
  font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
  font-size:11.5px;color:var(--ink-2);margin-top:10px;letter-spacing:.5px;
}
.version:first-of-type{margin-top:26px}
#modeLine{color:var(--sky-deep)}

/* ---------- 右列：形象选择 + 花名册 ---------- */
.title-right{
  width:460px;flex:none;position:relative;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;
  box-shadow:var(--hard);padding:22px 22px 18px;transform:rotate(.5deg);
}
.title-right .x-tape.t1{left:50%;margin-left:-48px;top:-12px}
.pick-title{
  font-family:var(--font-fun);font-size:21px;letter-spacing:3px;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.pick-title::before{
  content:"";width:12px;height:12px;border-radius:3px;flex:none;
  background:var(--accent);border:2px solid var(--ink);transform:rotate(45deg);
}
.x-pick-sub{margin:5px 0 14px;font-size:12.5px;color:var(--ink-3);letter-spacing:1px}

.pick-row{display:flex;gap:16px}
.pick-card{
  position:relative;flex:1;cursor:pointer;border-radius:14px;overflow:visible;
  border:2.5px solid var(--ink);background:var(--paper-2);
  padding:10px 10px 0;box-shadow:var(--hard-s);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s,background .16s;
}
.pick-card img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;
  border-radius:9px;border:1.5px solid rgba(31,45,61,.35);
  transition:transform .18s ease;
}
.pick-card span{
  position:relative;display:block;margin:-13px auto 10px;width:max-content;
  font-family:var(--font-fun);font-size:14.5px;letter-spacing:3px;color:#fff;
  background:var(--ink);border-radius:999px;padding:3px 16px 2px;
  border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(31,45,61,.25);
}
.pick-card:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:6px 8px 0 rgba(31,45,61,.85)}
.pick-card:hover img{transform:scale(1.045)}
.pick-card.on{
  border-color:var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 3.5px var(--brand-2), var(--hard-s);
  animation:x-locked .3s ease;
}
@keyframes x-locked{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
/* 就决定是你了！缎带 */
.pick-card.on::after{
  content:"就决定是你了！";position:absolute;top:-13px;right:-12px;z-index:3;
  font-family:var(--font-fun);font-size:12px;letter-spacing:1.5px;color:#fff;
  background:var(--accent);border:2px solid var(--ink);border-radius:8px;
  padding:3px 9px 2px;box-shadow:2.5px 2.5px 0 var(--ink);
  transform:rotate(6deg);animation:x-pop .32s cubic-bezier(.2,2.2,.4,1) both;
}
@keyframes x-pop{from{transform:rotate(6deg) scale(0)}to{transform:rotate(6deg) scale(1)}}

.pick-note{
  margin:12px 0 14px;font-size:11.5px;color:var(--ink-3);
  display:flex;align-items:center;gap:6px;
}
.pick-note::before{
  content:"";width:14px;height:14px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l5.5 2v4c0 3.4-2.3 5.8-5.5 7-3.2-1.2-5.5-3.6-5.5-7v-4z' fill='%23e2f2ee' stroke='%231f7a6b' stroke-width='1.4'/%3E%3Cpath d='M5.4 8l1.8 1.8 3.4-3.6' fill='none' stroke='%231f7a6b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 花名册拍立得墙 */
.x-roster-cap{
  display:flex;align-items:baseline;gap:8px;
  border-top:2px dashed var(--line);padding-top:13px;
  font-family:var(--font-fun);font-size:15px;letter-spacing:2px;color:var(--ink);
}
.x-roster-cap i{
  font-style:normal;font-family:inherit;font-size:11px;letter-spacing:1px;color:var(--ink-3);
}
.roster{
  display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:11px;
}
.roster img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;
  border-radius:8px;border:1.5px solid rgba(31,45,61,.4);
  background:#fff;padding:2px;box-shadow:2px 2.5px 0 rgba(31,45,61,.22);
  transform:rotate(-1.2deg);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s;
  cursor:pointer;
  animation:x-up .5s ease both;
}
.roster img:nth-child(2n){transform:rotate(1.4deg)}
.roster img:nth-child(3n){transform:rotate(-.4deg)}
.roster img:nth-child(1){animation-delay:.05s}.roster img:nth-child(2){animation-delay:.1s}
.roster img:nth-child(3){animation-delay:.15s}.roster img:nth-child(4){animation-delay:.2s}
.roster img:nth-child(5){animation-delay:.25s}.roster img:nth-child(6){animation-delay:.3s}
.roster img:nth-child(7){animation-delay:.35s}.roster img:nth-child(8){animation-delay:.4s}
.roster img:nth-child(9){animation-delay:.45s}.roster img:nth-child(10){animation-delay:.5s}
.roster img:nth-child(11){animation-delay:.55s}.roster img:nth-child(12){animation-delay:.6s}
.roster img:hover{
  transform:rotate(0) scale(1.14);z-index:4;position:relative;
  border-color:var(--brand);box-shadow:3px 4px 0 rgba(31,45,61,.4);
}
@keyframes x-up{from{opacity:0;transform:translateY(10px) rotate(-2deg)}to{opacity:1}}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .title-inner{gap:34px}
  .title-right{width:400px}
  .title-left h1{font-size:clamp(48px,6.4vw,72px)}
}
@media (max-width:980px){
  #title{align-items:stretch;justify-content:flex-start}
  .title-inner{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:26px;padding:84px 4vw 34px;overflow-y:auto;height:100%;width:min(1180px,94vw)}
  .title-right{margin:0 auto}
  .title-left{text-align:left}
  .title-left h1{font-size:52px;letter-spacing:4px}
  .x-seal{right:-44px;width:48px;height:48px;font-size:16px}
  .title-right{width:min(560px,100%);transform:none}
  .roster{grid-template-columns:repeat(6,1fr)}
  .x-plane.p2,.x-spark.s1{display:none}
}
@media (max-width:560px){#title .btn.primary{font-size:19px;padding:14px 26px 13px}
  #title .btn{font-size:15px;padding:10px 18px 9px}
  .load-card{padding:26px 22px 24px}
  .load-card h1{font-size:34px;letter-spacing:4px}
  .pick-row{gap:11px}
  .roster{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  #title::before,.x-cloud,.x-plane,.x-spark,.x-day,.bar i,.bar i::after,
  .load-tip::before,.x-ticket .x-dot,.roster img{animation:none !important}
  #title .btn,.pick-card,.roster img{transition:none}
}

/* ★ 欢迎页视差过渡（配合 main.js 的 bindTitleParallax） */
.title-inner{transition:transform .18s ease-out}