/* ============================================================
   智慧群岛 · 五年级上册 边玩边学
   设计系统：青瓷蓝主色 + 星星金 + 四科色，儿童友好圆润卡片风
   响应式：手机 ≤480 / 平板 481-1024 / PC ≥1025
   ============================================================ */

:root{
  --sea:#0E7C86; --sea-deep:#0A5F67; --sea-soft:#E3F4F5;
  --sky1:#E8F8FA; --sky2:#BFE8EE;
  --gold:#F6A723; --gold-soft:#FFE9C2;
  --yu:#E4572E; --math:#0E7C86; --en:#7B5CD6; --sc:#2FA36B;
  --ink:#22333B; --sub:#5B6B72; --line:#D8E6E9; --card:#FFFFFF;
  --ok:#2FA36B; --danger:#E4572E;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 8px 22px rgba(14,124,134,.16);
  --shadow-sm:0 3px 10px rgba(14,124,134,.12);
  --topbar-h:58px;
  --font:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink);
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 46%,#9BD6DE 100%);
  overflow-x:hidden; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;touch-action:manipulation}
input,textarea{font-family:inherit;font-size:16px}
img{max-width:100%}
.app-root{min-height:100dvh;display:flex;flex-direction:column;position:relative}

/* ---------- 通用组件 ---------- */
.card{
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  padding:16px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:10px 22px;border-radius:999px;
  font-size:17px;font-weight:700;color:#fff;
  background:var(--sea);box-shadow:0 4px 0 rgba(0,0,0,.12);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  user-select:none;
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.btn.gold{background:var(--gold);color:#5A3A00}
.btn.ghost{background:#fff;color:var(--sea);box-shadow:0 0 0 2px var(--sea) inset}
.btn.soft{background:var(--sea-soft);color:var(--sea);box-shadow:none}
.btn.big{min-height:56px;font-size:19px;padding:12px 30px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;min-width:46px;border-radius:14px;
  background:rgba(255,255,255,.92);color:var(--sea);box-shadow:var(--shadow-sm);
}
.btn-icon svg{width:24px;height:24px}
.btn-chip{
  min-height:44px;padding:8px 16px;border-radius:999px;background:#fff;
  border:2px solid var(--line);font-size:15px;font-weight:700;color:var(--ink);
}
.btn-chip:active{background:var(--sea-soft);border-color:var(--sea)}

/* 科目色 */
.c-yu{--c:var(--yu)} .c-math{--c:var(--math)} .c-en{--c:var(--en)} .c-sc{--c:var(--sc)}
.c-yu .btn{background:var(--yu)} .c-math .btn{background:var(--math)}
.c-en .btn{background:var(--en)} .c-sc .btn{background:var(--sc)}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:20;height:var(--topbar-h);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(14,124,134,.10);
}
.topbar-title{flex:1;min-width:0;text-align:center}
.topbar-title b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title span{font-size:12px;color:var(--sub)}
.run-stars{display:flex;gap:2px;align-items:center;min-width:72px;justify-content:flex-end}
.run-stars svg{width:20px;height:20px}

/* 页面容器 */
.page{padding:16px 14px 40px;max-width:1100px;margin:0 auto;width:100%;flex:1}
.page-title{font-size:24px;font-weight:900;margin:6px 0 14px;display:flex;align-items:center;gap:10px}
.page-title svg{width:30px;height:30px}

/* 首页 */
.home-hero{
  position:relative;border-radius:var(--r-lg);padding:18px 18px 26px;
  background:linear-gradient(135deg,#0E7C86 0%,#17A0AC 60%,#2FB7C0 100%);
  color:#fff;box-shadow:var(--shadow);overflow:hidden;
}
.home-hero .hero-title{font-size:26px;font-weight:900;letter-spacing:1px}
.home-hero .hero-sub{font-size:14px;opacity:.92;margin-top:4px}
.hero-title-row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:2px}
.home-hero .hero-right{display:flex;align-items:center;gap:8px}
.hero-shells{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.94);border:1.5px solid rgba(14,124,134,.2);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:900;color:#B45309;box-shadow:0 3px 10px rgba(0,0,0,.08);cursor:pointer;transition:transform .2s}
.hero-shells svg{width:15px;height:15px;color:#D97706}
.hero-shells b{font-size:12px;color:#B45309}
.hero-shells:active{transform:scale(.94)}
.hero-stars{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.08);backdrop-filter:blur(2px)}
.home-hero .hero-waves{position:absolute;left:-10%;right:-10%;bottom:-6px;opacity:.5}
.home-hero .hero-cloud{position:absolute;background:rgba(255,255,255,.5);border-radius:50%;z-index:1;pointer-events:none}
.home-hero .hero-cloud::before,.home-hero .hero-cloud::after{content:'';position:absolute;background:inherit;border-radius:50%}
.home-hero .hc1{width:52px;height:20px;top:12px;right:92px}
.home-hero .hc1::before{width:30px;height:18px;left:-11px;top:-7px}
.home-hero .hc1::after{width:22px;height:16px;right:-8px;top:-5px}
.home-hero .hc2{width:36px;height:15px;left:16px;bottom:64px;opacity:.4}
.home-hero .hc2::before{width:22px;height:14px;left:-9px;top:-6px}
.titles-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.title-badge{background:var(--gold);color:#5A3A00;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:800}

.daily-card{
  margin-top:14px;border-radius:24px;padding:16px;display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#FFF3D6,#FFE2A8);border:2px solid #F6A723;
  box-shadow:0 10px 26px rgba(246,167,35,.22);position:relative;overflow:hidden;
  animation:dailyIn .5s cubic-bezier(.2,1.4,.4,1);
}
.daily-card::after{content:'';position:absolute;right:-34px;top:-34px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.4);pointer-events:none}
.daily-card .dc-ico{width:52px;height:52px;border-radius:16px;background:#fff;color:var(--gold);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(246,167,35,.3);
  flex-shrink:0}
.daily-card .dc-ico svg{width:28px;height:28px}
.daily-card .dc-main{flex:1;min-width:0}
.daily-card .d-label{font-size:12px;font-weight:900;color:#B4690E;letter-spacing:1px}
.daily-card .d-name{font-size:17px;font-weight:900;color:#5A3A00;margin-top:2px;line-height:1.3}
.daily-card .dc-sub{font-size:12px;color:#8A5A00;font-weight:700;margin-top:2px}
.daily-card .btn{flex-shrink:0}
.daily-card.done{background:linear-gradient(135deg,#E9FAF0,#D3F2E0);border-color:#2FA36B;
  box-shadow:0 10px 26px rgba(47,163,107,.22)}
.daily-card.done::after{background:rgba(255,255,255,.45)}
.daily-card.done .dc-ico{color:#2FA36B;box-shadow:0 4px 12px rgba(47,163,107,.3)}
.daily-card.done .d-label{color:#1E7A4C}
.daily-card.done .d-name{color:#125D37}
.daily-card.done .dc-sub{color:#2F8A5C}
@keyframes dailyIn{from{transform:translateY(26px) scale(.96);opacity:0}}

.subject-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.subject-card{
  border-radius:var(--r-lg);padding:16px;color:#fff;display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:170px;text-align:left;
  transition:transform .15s ease;
}
.subject-card::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.30),transparent);pointer-events:none}
.subject-card:active{transform:scale(.97)}
.subject-card .sc-ico{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center}
.subject-card .sc-ico svg{width:32px;height:32px}
.subject-card .sc-name{font-size:20px;font-weight:900}
.subject-card .sc-book{font-size:12px;opacity:.85}
.subject-card .sc-progress{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.subject-card .sc-bar{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.subject-card .sc-bar i{display:block;height:100%;border-radius:99px;background:var(--gold)}

.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.quick-btn{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:none;
  border-radius:18px;padding:13px 4px 11px;cursor:pointer;box-shadow:var(--shadow-sm);
  border:1.5px solid #E2EFF2;transition:transform .15s,box-shadow .15s}
.quick-btn:active{transform:scale(.93);box-shadow:var(--shadow)}
.qb-ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--c1,#0E7C86),var(--c2,#2FB7C0));color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.14)}
.qb-ico svg{width:20px;height:20px}
.qb-label{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap}

/* 岛屿地图 */
.map-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#DFF5F8 0%,#BFE8EE 40%,#8FD4DC 100%);box-shadow:var(--shadow)}
.map-scene{position:relative;min-height:640px;width:100%}
.map-sun{position:absolute;top:18px;right:26px;width:54px;height:54px;border-radius:50%;background:var(--gold);box-shadow:0 0 40px rgba(246,167,35,.7)}
.map-island{position:absolute;left:4%;right:4%;bottom:-30px;height:78%;border-radius:50% 50% 12px 12px;
  background:linear-gradient(180deg,var(--iso,#2FA36B) 0%,var(--iso2,#1F7A4E) 100%);}
.map-island::before{content:'';position:absolute;left:-3%;right:-3%;top:-16px;height:34px;border-radius:50%;
  background:rgba(255,231,180,.85)}
.map-palm{position:absolute;color:#1F5A3A}
.map-cloud{position:absolute;background:#fff;border-radius:50%;opacity:.8;z-index:2;animation:drift 26s ease-in-out infinite alternate;pointer-events:none}
.map-cloud::before,.map-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.map-cloud.c1{width:56px;height:25px;top:9%;left:7%}
.map-cloud.c1::before{width:34px;height:22px;left:-12px;top:-8px}
.map-cloud.c1::after{width:26px;height:19px;right:-10px;top:-6px}
.map-cloud.c2{width:42px;height:19px;top:17%;right:11%;animation-delay:-11s;animation-duration:32s}
.map-cloud.c2::before{width:25px;height:17px;left:-9px;top:-7px}
.map-cloud.c2::after{width:19px;height:15px;right:-7px;top:-5px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(24px)}}
.map-gull{position:absolute;color:#fff;opacity:.85;z-index:2;animation:fly 20s linear infinite alternate;pointer-events:none}
@keyframes fly{from{transform:translateY(0) translateX(0)}to{transform:translateY(-12px) translateX(18px)}}
.map-boat{position:absolute;z-index:3;animation:bob 5s ease-in-out infinite;pointer-events:none}
.map-boat svg{display:block;filter:drop-shadow(0 2px 3px rgba(14,124,134,.25))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.map-node{
  position:absolute;transform:translate(-50%,-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:118px;min-height:74px;padding:10px 12px;border-radius:20px;
  background:#fff;box-shadow:var(--shadow-sm);border:3px solid var(--c,var(--sea));
  transition:transform .15s ease, box-shadow .15s ease;
}
.map-node:active{transform:translate(-50%,-50%) scale(.95)}
.map-node .mn-idx{font-size:11px;font-weight:800;color:var(--c,var(--sea));letter-spacing:.5px}
.map-node .mn-name{font-size:15px;font-weight:900;text-align:center;line-height:1.25}
.map-node .mn-stars{display:flex;gap:2px}
.map-node .mn-stars svg{width:16px;height:16px}
.map-node.now{animation:pulse 1.6s ease-in-out infinite;border-color:var(--gold)}
.map-node.now .mn-idx{color:var(--gold)}
.map-legend{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;
  margin:14px auto 6px;background:rgba(255,255,255,.97);border:1.5px solid rgba(14,124,134,.18);border-radius:999px;
  padding:8px 18px;font-size:12.5px;font-weight:800;color:var(--sea);white-space:nowrap;
  box-shadow:0 5px 16px rgba(14,124,134,.16);position:relative;z-index:6}
.map-legend .ml-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--sea)}
.map-legend .ml-ico svg{width:14px;height:14px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(246,167,35,.5)}50%{box-shadow:0 0 0 12px rgba(246,167,35,0)}}

/* 游戏舞台 */
.game-wrap{flex:1;display:flex;flex-direction:column;min-height:100dvh}
.game-stage{flex:1;position:relative;padding:12px;display:flex;flex-direction:column;max-width:980px;width:100%;margin:0 auto}
.intro-card{
  position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(14,124,134,.5);backdrop-filter:blur(4px);padding:20px;text-align:center;
}
.intro-card .in-box{background:#fff;border-radius:28px;padding:24px 20px 20px;max-width:420px;width:100%;
  box-shadow:0 18px 50px rgba(10,60,66,.35);max-height:88vh;overflow-y:auto}
.intro-card .in-ico{width:64px;height:64px;border-radius:50%;background:var(--sea-soft);color:var(--sea);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.intro-card .in-ico svg{width:32px;height:32px}
.intro-card h3{font-size:20px;font-weight:900;color:var(--ink);line-height:1.4}
.intro-card .in-lead{font-size:14px;color:var(--sub);margin:8px 0 14px;line-height:1.65}
.intro-card .in-steps{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;text-align:left}
.intro-card .in-step{display:flex;align-items:flex-start;gap:10px;background:var(--sea-soft);border-radius:14px;
  padding:10px 12px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.5}
.intro-card .in-step i{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--sea);color:#fff;
  font-style:normal;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.intro-card .in-star{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold-soft);
  border-radius:999px;padding:8px 14px;margin:0 0 14px;font-size:14px;font-weight:800;color:#5A3A00;line-height:1.4}
.intro-card .in-star svg{width:18px;height:18px;flex-shrink:0}
.intro-card .btn{width:100%}

/* 反馈徽章 */
.feedback-badge{
  position:fixed;left:50%;top:34%;transform:translateX(-50%);z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px 10px 10px;border-radius:999px;font-size:16px;font-weight:900;color:#fff;
  box-shadow:0 10px 30px rgba(10,40,44,.28);border:3px solid rgba(255,255,255,.85);
  animation:badgeIn .35s cubic-bezier(.2,1.6,.4,1), badgeOut .4s ease 1.3s forwards;
  pointer-events:none;max-width:84vw;text-align:left;line-height:1.4;
}
.feedback-badge .fb-ico{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.28);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.feedback-badge .fb-ico svg{width:20px;height:20px}
.feedback-badge.ok{background:var(--ok)}
.feedback-badge.fail{background:var(--danger)}
@keyframes badgeIn{from{transform:translateX(-50%) translateY(-24px) scale(.6);opacity:0}}
@keyframes badgeOut{to{transform:translateX(-50%) translateY(-16px) scale(.9);opacity:0}}

/* 结算弹层 */
.settle-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,40,44,.6);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.settle-box{background:#fff;border-radius:var(--r-lg);padding:26px 22px;max-width:420px;width:100%;
  box-shadow:var(--shadow);text-align:center;animation:badgeIn .4s cubic-bezier(.2,1.6,.4,1)}
.settle-box h3{font-size:22px;font-weight:900;color:var(--sea)}
.settle-stars{display:flex;justify-content:center;gap:12px;margin:18px 0 6px}
.settle-stars .st{width:64px;height:64px;opacity:1;transform:scale(1);transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .3s ease}
.settle-stars .st.on{opacity:0;transform:translateY(130px) scale(.3)}
.settle-stars .st.on.fly{opacity:1;transform:translateY(0) scale(1)}
.settle-stars .st.on.pop{animation:starPop .5s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes starPop{0%{transform:scale(.2) rotate(-30deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.settle-score{font-size:15px;color:var(--sub);margin:8px 0}
.settle-score b{font-size:22px;color:var(--gold);font-weight:900}
.settle-time{display:inline-block;margin-left:10px;font-size:13px;color:#7A9396;background:var(--sea-soft);
  border-radius:999px;padding:3px 10px;font-weight:700}
.settle-title{display:inline-block;background:var(--gold);color:#5A3A00;border-radius:999px;padding:6px 16px;
.settle-title.shell-gift{background:#E3F5EC;color:#1F7A4D}
.settle-title.stamp-gift{background:#FFF3D6;color:#8A5A00;animation:pulse 1.2s}
.settle-title.ach-gift{background:#EDE6FA;color:#6B46C1}
  font-size:15px;font-weight:800;margin:6px 0}
.settle-enc{font-size:16px;color:var(--ink);font-weight:700;margin:10px 0 18px}
.settle-btns{display:flex;gap:12px}
.settle-btns .btn{flex:1}

/* 通用弹窗 */
.modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,40,44,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:var(--r-lg);padding:24px 20px;max-width:420px;width:100%;box-shadow:var(--shadow);animation:badgeIn .3s ease;position:relative}
.modal-box .modal-x{position:absolute;top:10px;right:10px;width:40px;height:40px;min-width:40px;border-radius:12px;background:var(--sea-soft);color:var(--sub);display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,color .12s ease}
.modal-box .modal-x:active{transform:scale(.92);color:var(--sea)}
.modal-box .modal-x svg{width:18px;height:18px}
.modal-box h3{font-size:20px;font-weight:900;color:var(--sea);margin-bottom:12px}
.modal-box .mb-text{font-size:15px;color:var(--sub);line-height:1.7;margin-bottom:16px}
.modal-box input[type=number],.modal-box input[type=text]{
  width:100%;min-height:50px;border:2px solid var(--line);border-radius:14px;padding:8px 14px;
  font-size:18px;text-align:center;font-weight:700;outline:none;color:var(--ink);
}
.modal-box input:focus{border-color:var(--sea)}

/* AI 聊天 */
.chat-overlay{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;background:#fff}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--sea);color:#fff}
.chat-head b{flex:1;font-size:17px}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:var(--sea-soft);display:flex;flex-direction:column;gap:10px}
.chat-bubble{max-width:80%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.chat-bubble.bot{background:#fff;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.chat-bubble.me{background:var(--sea);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-tip{font-size:12px;color:var(--sub);text-align:center}
.chat-input-row{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--line)}
.chat-input-row input{flex:1;min-height:46px;border:2px solid var(--line);border-radius:999px;padding:6px 16px;outline:none;font-size:15px}
.chat-input-row input:focus{border-color:var(--sea)}
.chat-input-row .btn{min-height:46px;padding:8px 18px}

/* 家长看板 */
.parent-tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:var(--r-md);overflow:hidden}
.parent-tbl th,.parent-tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
.parent-tbl th{background:var(--sea-soft);color:var(--sea);font-size:13px}
.parent-tbl tr:last-child td{border-bottom:none}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border-radius:var(--r-md);padding:12px;text-align:center;box-shadow:var(--shadow-sm)}
.kpi b{display:block;font-size:24px;font-weight:900;color:var(--sea)}
.kpi span{font-size:12px;color:var(--sub)}

/* Toast */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:95;
  background:rgba(34,51,59,.92);color:#fff;padding:12px 22px;border-radius:999px;font-size:15px;font-weight:600;
  box-shadow:var(--shadow);animation:badgeIn .3s ease, badgeOut .4s ease 2.2s forwards;max-width:86vw;text-align:center}

/* 动画工具类 */
.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.pop-in{animation:badgeIn .35s cubic-bezier(.2,1.6,.4,1)}
.fade-in{animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.confetti-canvas{position:fixed;inset:0;z-index:88;pointer-events:none}

/* ============ 响应式 ============ */
@media (max-width:480px){
  .subject-grid{grid-template-columns:1fr 1fr;gap:12px}
  .map-scene{min-height:520px}
  .page-title{font-size:20px}
  .home-hero .hero-title{font-size:22px}
}
@media (min-width:481px) and (max-width:767px){
  .subject-grid{grid-template-columns:1fr 1fr;gap:14px}
  .map-scene{min-height:640px}
}
@media (min-width:768px) and (max-width:1024px){
  .subject-grid{grid-template-columns:repeat(4,1fr)}
  .map-scene{min-height:640px}
  .fig-grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1025px){
  .fig-grid{grid-template-columns:repeat(4,1fr)}
  .subject-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .subject-card{min-height:200px}
  .subject-card:hover{transform:translateY(-4px)}
  .map-scene{min-height:700px}
  .map-node:hover{transform:translate(-50%,-50%) scale(1.05)}
  .chat-overlay{inset:auto;right:18px;bottom:18px;width:380px;height:560px;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
  .page{padding:22px 26px 50px}
  .home-hero{padding:26px 30px 34px}
  .home-hero .hero-title{font-size:34px}
  .home-hero .hero-sub{font-size:16px}
  .home-hero .hc3{width:84px;height:30px;left:38%;bottom:26px;opacity:.28}
  .home-hero .hc3::before{width:48px;height:26px;left:-16px;top:-9px}
  .home-hero .hc3::after{width:34px;height:24px;right:-12px;top:-7px}
}

/* ============ 全局迭代升级：转场 / 氛围 / 连击 / 粒子 / 计时环 / 朗读 / 报告 ============ */

/* 页面转场（fadeIn + 上滑） */
.page-enter{animation:pageEnter .38s cubic-bezier(.2,.9,.3,1)}
@keyframes pageEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* 分科开屏氛围层 */
.ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:18px}
.ambient::before,.ambient::after{content:'';position:absolute;left:0;right:0}
.ambient-yu::before,.ambient-yu::after{top:-12%;width:9px;height:9px;border-radius:50% 0 50% 50%;
  background:#E4572E;opacity:.5;animation:ambFall 7s linear infinite}
.ambient-yu::after{left:55%;animation-delay:2.4s;width:7px;height:7px;background:#F6A723;opacity:.6}
.ambient-math::before,.ambient-math::after{width:5px;height:5px;border-radius:50%;background:#0E7C86;
  opacity:.45;top:20%;animation:ambTwinkle 3.2s ease-in-out infinite}
.ambient-math::after{left:80%;top:60%;animation-delay:1.1s;background:#F6A723;opacity:.5}
.ambient-en::before,.ambient-en::after{width:16px;height:16px;border-radius:50%;border:2px solid rgba(123,92,214,.35);
  bottom:-20%;animation:ambBubble 6.5s ease-in infinite}
.ambient-en::after{left:70%;animation-delay:3s;width:12px;height:12px}
.ambient-sc::before{top:-30%;left:10%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,163,107,.22) 0%,rgba(47,163,107,0) 65%);
  animation:ambLens 6s ease-in-out infinite}
.ambient-sc::after{top:-30%;left:65%;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,167,35,.2) 0%,rgba(246,167,35,0) 65%);
  animation:ambLens 7.5s ease-in-out 1.4s infinite}
@keyframes ambFall{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(110vh) rotate(360deg)}}
@keyframes ambTwinkle{0%,100%{transform:scale(.5);opacity:.2}50%{transform:scale(1.4);opacity:.9}}
@keyframes ambBubble{0%{transform:translateY(0) scale(.7)}100%{transform:translateY(-120vh) scale(1.1)}}
@keyframes ambLens{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,40px) scale(1.15)}}

/* 连击徽章 */
.combo-badge{position:fixed;left:50%;top:13%;transform:translateX(-50%);z-index:96;
  display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold),#F08A1F);
  color:#fff;border-radius:999px;padding:10px 20px;font-size:16px;font-weight:900;
  box-shadow:0 8px 24px rgba(246,167,35,.5);border:3px solid rgba(255,255,255,.9);
  animation:comboIn .3s cubic-bezier(.2,1.6,.4,1),comboGlow 1.2s ease-in-out .3s infinite}
.combo-badge svg{width:20px;height:20px}
@keyframes comboIn{from{transform:translateX(-50%) translateY(-30px) scale(.5);opacity:0}}
@keyframes comboGlow{0%,100%{box-shadow:0 8px 24px rgba(246,167,35,.5)}50%{box-shadow:0 8px 34px rgba(246,167,35,.85)}}

/* 粒子爆花 */
.burst-p{position:fixed;width:10px;height:10px;border-radius:50%;z-index:95;pointer-events:none;
  transform:translate(-50%,-50%) scale(1);animation:burstFly .7s ease-out forwards}
@keyframes burstFly{
  from{transform:translate(-50%,-50%) scale(1);opacity:1}
  to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15);opacity:0}
}

/* 计时环 */
.timer-ring{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:2px 10px;
  background:rgba(255,255,255,.9);border-radius:999px;box-shadow:var(--shadow-sm)}
.timer-ring svg{width:26px;height:26px;display:block}
.timer-ring .tr-bg{fill:none;stroke:#E3EFF1;stroke-width:4}
.timer-ring .tr-fg{fill:none;stroke:var(--sea);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:119;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center}
.timer-ring .tr-num{font-size:13px;font-weight:900;color:var(--sea);min-width:18px;text-align:center}

/* AI 讲解朗读按钮 */
.mb-act{margin-top:-4px;margin-bottom:6px}
.mb-act .btn{width:auto;padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.mb-act .btn svg{width:16px;height:16px}

/* 家长看板学习报告 */
.weak-list{display:flex;flex-direction:column;gap:8px}
.weak-item{display:flex;align-items:center;gap:10px;background:var(--sea-soft);border-radius:12px;padding:9px 12px}
.weak-item i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.weak-item span{flex:1;font-size:14px;font-weight:700;color:var(--ink)}
.weak-item b{font-size:12px;color:var(--sub);font-weight:700;white-space:nowrap}

/* ============ 阿智船长角色 ============ */
.chat-ava{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;margin-right:2px}
.chat-ava svg{width:100%;height:100%}
.chat-head{display:flex;align-items:center}
.chat-head b{flex:1}
.in-azhi{display:flex;align-items:center;gap:10px;background:var(--sea-soft);border-radius:16px;padding:8px 12px;margin:-4px 0 12px}
.in-azhi-ava{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm)}
.in-azhi-ava svg{width:100%;height:100%}
.in-azhi-say{flex:1;font-size:14px;line-height:1.5;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:6px}
.in-pts-voice{width:28px;height:28px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(14,124,134,.12);color:var(--sea);cursor:pointer;transition:all .2s;margin-left:auto}
.in-azhi-voice,.ha-voice,.sa-voice{width:28px;height:28px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;
  background:rgba(14,124,134,.12);color:var(--sea);cursor:pointer;transition:all .2s}
.in-azhi-voice svg,.ha-voice svg,.sa-voice svg{width:16px;height:16px}
.in-azhi-voice.on,.ha-voice.on,.sa-voice.on{background:var(--gold);color:#fff;transform:scale(1.12)}
/* 本课要点卡（先学再玩） */
.in-points{background:linear-gradient(135deg,#FFFDF6,#FFF6E2);border:1.5px solid #F6C75C;border-radius:16px;padding:12px 14px;margin:0 0 12px}
.in-points-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.in-points-tag{background:linear-gradient(135deg,var(--gold),#F08A1F);color:#fff;font-size:12px;font-weight:900;border-radius:999px;padding:3px 10px}
.in-points-lb{font-size:11px;color:#A9812A;font-weight:700}
.in-point{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;line-height:1.45;color:var(--ink);font-weight:600}
.in-point i{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--sea);color:#fff;font-size:11px;font-style:normal;font-weight:800}
/* 答错 AI 讲一讲按钮 */
.fb-ai{position:fixed;left:50%;top:calc(34% + 52px);transform:translateX(-50%);z-index:97;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#0E7C86,#17A0AC);color:#fff;border:none;border-radius:999px;padding:10px 16px;
  font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(14,124,134,.4);animation:fbAiIn .25s cubic-bezier(.2,1.6,.4,1)}
.fb-ai svg{width:16px;height:16px}
@keyframes fbAiIn{from{transform:translateX(-50%) translateY(-12px) scale(.8);opacity:0}}
/* 结算阿智 */
.settle-azhi{display:flex;align-items:center;gap:10px;background:var(--sea-soft);border-radius:16px;padding:8px 12px;margin:-6px 0 14px}
.sa-ava{width:48px;height:48px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm)}
.sa-ava svg{width:100%;height:100%}
.sa-say{flex:1;font-size:14px;line-height:1.5;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:6px;text-align:left}
/* 首页 hero 阿智 */
.hero-azhi{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-right:4px}
.ha-ava{width:46px;height:46px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.ha-ava svg{width:100%;height:100%}
.ha-say{flex:1;font-size:14px;font-weight:800;background:rgba(255,255,255,.2);border-radius:999px;padding:7px 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
/* 讲解弹窗阿智 */
.mb-azhi{display:flex;align-items:center;gap:10px;background:var(--sea-soft);border-radius:14px;padding:8px 12px;margin:-6px 0 12px}
.ma-ava{width:40px;height:40px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:50%}
.ma-ava svg{width:100%;height:100%}
.ma-say{flex:1;font-size:13px;color:var(--ink);font-weight:700;line-height:1.5}
.ma-say b{color:var(--sea)}

/* ============ 学期航线图 ============ */
.route-sec{margin-top:16px}
.route-hd{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:var(--ink);margin-bottom:8px}
.route-hd svg{width:20px;height:20px;color:var(--sea)}
.route-track{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.route-track::-webkit-scrollbar{display:none}
.route-seg{flex-shrink:0;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:var(--shadow-sm);min-width:120px}
.route-name{font-size:12px;font-weight:900;margin-bottom:8px}
.route-nodes{display:flex;gap:7px;flex-wrap:wrap}
.route-node{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #D7E6EA;background:#F4FAFB;color:#fff;cursor:pointer;transition:transform .15s;font-size:12px;padding:0}
.route-node svg{width:14px;height:14px}
.route-node.got{background:#7FC6CE;border-color:#7FC6CE}
.route-node.done{background:linear-gradient(135deg,var(--gold),#F08A1F);border-color:#F6A723;box-shadow:0 3px 8px rgba(246,167,35,.4)}
.route-node:active{transform:scale(.88)}

/* ============ 冒险档案 ============ */
.tre-card{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.tre-hd{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;color:var(--ink);margin-bottom:12px}
.tre-hd svg{width:20px;height:20px;color:var(--gold)}
.tre-hd-sub{font-size:12px;color:var(--sub);font-weight:700;margin-left:auto;white-space:nowrap}
.stamp-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.stamp-day{flex-shrink:0;width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;background:#F2F8F9;border-radius:12px;padding:8px 0;border:2px solid transparent}
.stamp-day i{width:24px;height:24px;border-radius:50%;background:#D7E6EA;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal}
.stamp-day i svg{width:13px;height:13px}
.stamp-day b{font-size:10px;color:var(--sub);font-weight:800}
.stamp-day.on{background:linear-gradient(135deg,#FFF3D6,#FFE2A8);border-color:#F6C75C}
.stamp-day.on i{background:linear-gradient(135deg,var(--gold),#F08A1F)}
.stamp-day.on b{color:#A9812A}
.tre-tip{font-size:12px;color:var(--sub);margin-top:10px;line-height:1.5}
.fig-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fig-card{border:none;border-radius:16px;padding:12px;text-align:left;cursor:pointer;background:#F2F8F9;border:2px solid transparent;transition:transform .15s}
.fig-card.lit{background:#fff;border-color:var(--fc);box-shadow:0 6px 16px rgba(14,124,134,.12)}
.fig-card.lock{opacity:.85}
.fig-card:active{transform:scale(.97)}
.fc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fc-ico{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--sea-soft);border-radius:10px;color:var(--sea)}
.fc-ico svg{width:20px;height:20px}
.fig-card.lock .fc-ico{color:#9DB7BC;background:#E8F0F2}
.fc-tag{font-size:10px;color:var(--sub);font-weight:800;background:#fff;border-radius:999px;padding:2px 8px}
.fig-card.lit .fc-tag{color:var(--fc)}
.fc-name{font-size:14px;font-weight:900;color:var(--ink);margin-bottom:4px}
.fc-point{font-size:11px;color:var(--sub);line-height:1.45;margin-bottom:8px;min-height:30px}
.fig-card.lit .fc-point{color:var(--ink)}
.fc-stars{display:flex;gap:3px}
.fc-stars span{width:15px;height:15px;opacity:.25;display:inline-flex;align-items:center;justify-content:center}
.fc-stars span svg{width:100%;height:100%}
.fc-stars span.on{opacity:1;filter:drop-shadow(0 1px 2px rgba(246,167,35,.4))}
.title-card .tre-hd svg{color:#F6A723}
.tre-titles{display:flex;flex-wrap:wrap;gap:8px}

/* ============ 复习岛 ============ */
.rev-azhi{display:flex;align-items:center;gap:10px;background:var(--sea-soft);border-radius:16px;padding:10px 14px;margin-bottom:14px}
.ra-ava{width:46px;height:46px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm)}
.ra-ava svg{width:100%;height:100%}
.ra-say{flex:1;font-size:14px;font-weight:700;color:var(--ink);line-height:1.5}
.rev-list{display:flex;flex-direction:column;gap:10px}
.rev-item{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.ri-ico{width:38px;height:38px;flex-shrink:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.ri-ico svg{width:20px;height:20px}
.ri-main{flex:1;min-width:0}
.ri-name{font-size:14px;font-weight:900;color:var(--ink)}
.ri-msg{font-size:12px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-count{font-size:11px;color:#F08A1F;font-weight:800;margin-top:2px}
.rev-item .btn{flex-shrink:0}
.btn.small{padding:8px 14px;font-size:13px}
.rev-empty{text-align:center;padding:40px 20px;color:var(--sub)}
.rev-empty svg{width:44px;height:44px;color:#7FC6CE}
.rev-empty p{margin-top:12px;line-height:1.8;font-size:14px}

/* ============ 家长看板新增 ============ */
.advice-box{background:linear-gradient(135deg,#FFFDF6,#FFF6E2);border-radius:12px;padding:12px 14px;margin-top:10px;border:1.5px dashed #F6C75C}
/* 家长端本周报告 */
.wr-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.wr-k{background:#fff;border-radius:12px;padding:8px 2px;text-align:center;box-shadow:var(--shadow-sm);border:1.5px solid #E2EFF2}
.wr-k b{display:block;font-size:20px;color:var(--sea)}
.wr-k span{font-size:11px;color:var(--sub);font-weight:700}
.wr-weak{margin-top:10px;background:#fff;border-radius:12px;padding:10px 12px;border:1.5px solid #E2EFF2}
.wr-weak> b{font-size:14px;color:var(--ink)}
.wr-witem{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;font-weight:800;color:var(--ink)}
.wr-witem i{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.wr-witem b{margin-left:auto;color:var(--danger);font-size:12px}
.wr-wpoint{font-size:12px;color:var(--sub);margin:4px 0 0 16px;line-height:1.6}
/* 打印：只打印本周报告 */
@media print{
  body *{visibility:hidden !important}
  #week-report,#week-report *{visibility:visible !important}
  #week-report{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:2px solid var(--sea)}
}

.advice-box b{display:flex;align-items:center;gap:6px;color:#A9812A;font-size:14px;margin-bottom:6px}
.advice-box b svg{width:16px;height:16px}
.advice-box p{font-size:13px;line-height:1.7;color:var(--ink);margin:0}
.toggle{width:52px;height:30px;border-radius:999px;border:none;background:#D7E6EA;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;padding:0}
.toggle i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:left .2s}
.toggle.on{background:var(--sea)}
.toggle.on i{left:25px}

/* ===== 贝壳商店 ===== */
.shop-bal{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FFF7E8,#FFEFD6);border:1.5px solid rgba(217,119,6,.25);border-radius:18px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.shop-bal .sb-ico{width:34px;height:34px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#D97706;flex-shrink:0}
.shop-bal .sb-ico svg{width:20px;height:20px}
.shop-bal .sb-num{font-size:22px;font-weight:900;color:#B45309}
.shop-bal .sb-label{font-size:12px;color:#9A6B2F;font-weight:600;line-height:1.4}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shop-card{background:#fff;border-radius:18px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;border:2.5px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s}
.shop-card:active{transform:scale(.97)}
.shop-card.owned{border-color:#2FA36B;background:linear-gradient(165deg,#F4FBF6,#E6F6EC)}
.sh-ico{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--sea-soft)}
.sh-ico svg{width:50px;height:50px}
.sh-name{font-size:14px;font-weight:900;color:var(--ink);margin-top:4px}
.sh-desc{font-size:11px;color:var(--sub);line-height:1.4;text-align:center;min-height:30px}
.sh-price{margin-top:6px}
.sh-coin{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#F6A723,#F08A1F);color:#5A3A00;font-weight:900;font-size:13px;border-radius:999px;padding:5px 12px}
.sh-coin svg{width:13px;height:13px;color:#B45309}
.sh-owned{display:inline-block;background:#2FA36B;color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:5px 12px}

/* ===== 荣誉勋章墙 ===== */
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ach-item{background:#fff;border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid var(--line);opacity:.72}
.ach-item.got{border-color:rgba(246,167,35,.6);background:linear-gradient(165deg,#FFFDF5,#FFF3D6);opacity:1}
.ach-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#B9C8CB;background:#F0F5F6}
.ach-item.got .ach-ico{background:#FFF0CC;color:#F6A723}
.ach-ico svg{width:20px;height:20px}
.ach-name{font-size:13px;font-weight:900;color:var(--ink)}
.ach-item.got .ach-name{color:#8A5A00}
.ach-desc{font-size:10.5px;color:var(--sub);text-align:center;line-height:1.35}

/* ===== 地图收藏装饰 ===== */
.map-deco{position:absolute;z-index:3;pointer-events:none;animation:decoIn .6s ease both}
@keyframes decoIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.deco-dolphin{left:30%;bottom:4%;animation:decoIn 1s ease both,dolphinSwim 4s ease-in-out infinite}
@keyframes dolphinSwim{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.deco-dolphin svg{width:52px;height:52px;filter:drop-shadow(0 3px 5px rgba(31,58,90,.2))}
.deco-lighthouse{right:1.5%;top:9%;transform-origin:bottom center;animation:decoIn .8s ease both}
.deco-lighthouse svg{width:42px;height:42px}
.deco-flag{left:24%;top:22%;transform:scale(1.2);animation:decoIn .7s ease both,flagWave 2.6s ease-in-out infinite;transform-origin:bottom center}
@keyframes flagWave{0%,100%{transform:scale(1.2) rotate(-2deg)}50%{transform:scale(1.2) rotate(2.5deg)}}
.deco-flag svg{width:30px;height:30px}
.deco-compass{right:3%;bottom:12%;animation:decoIn .9s ease both,compassSpin 8s linear infinite}
@keyframes compassSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.deco-compass svg{width:34px;height:34px}
.deco-sail{right:14%;bottom:5%;animation:decoIn .8s ease both}
.deco-sail svg{width:44px;height:44px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
@media (max-width:480px){
  .deco-dolphin{left:26%;bottom:3%}
  .deco-lighthouse{right:1%;top:8%}
  .deco-flag{left:20%;top:20%}
  .deco-compass{right:2%;bottom:10%}
}

/* ============================================================
   冒险主题 · 船长日志（#/treasure 冒险档案 / #/review 复习岛 / AI 小老师）
   视觉语言：羊皮纸航海日志 + 罗盘藏宝图 + 蜡封印章 + 金属勋章
   ============================================================ */
.adv-page{position:relative;padding:16px 16px 28px;overflow:hidden;isolation:isolate}
.adv-page::before{content:'';position:absolute;inset:0;z-index:-2;background:
  radial-gradient(1200px 600px at 50% -80px, #FFF8E7 0%, #F7EFD9 45%, #F1E4C4 100%)}
.adv-page::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 20% 30%, rgba(201,162,39,.12) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(201,162,39,.10) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 45% 82%, rgba(201,162,39,.10) 0 1.8px, transparent 1.9px);
  background-size:180px 180px,240px 240px,300px 300px}
.adv-page .adv-corners{position:absolute;inset:0;pointer-events:none;z-index:0}
.adv-page .adv-corners svg{position:absolute;opacity:.16}
.adv-page .adv-corners .c1{top:10px;right:12px;width:64px;height:64px}
.adv-page .adv-corners .c2{bottom:14px;left:10px;width:72px;height:72px;opacity:.12}
.adv-page .adv-corners .c3{top:38%;right:-14px;width:84px;height:84px;opacity:.08}
.adv-page>*{position:relative;z-index:1}

/* 卷轴标题 */
.log-title{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 4px}
.log-title .lt-badge{flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#C9A227,#8A6B1F);
  display:flex;align-items:center;justify-content:center;color:#FFF6D8;box-shadow:0 4px 12px rgba(138,107,31,.45), inset 0 0 0 3px rgba(255,246,216,.35)}
.log-title .lt-badge svg{width:26px;height:26px}
.log-title .lt-main{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.log-title h1{margin:0;font-size:22px;letter-spacing:2px;color:#5A3A12;
  background:linear-gradient(180deg,#8A6B1F,#5A3A12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900}
.log-title .lt-sub{font-size:11px;color:#A9843F;letter-spacing:4px;font-weight:800;margin-top:2px}
.log-divider{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:#C9A227}
.log-divider::before,.log-divider::after{content:'';flex:1;height:2px;
  background:linear-gradient(90deg,transparent,#D9B96A,transparent);border-radius:2px}
.log-divider span{font-size:11px;font-weight:900;letter-spacing:3px;color:#A9843F}

/* 罗盘动画（标题旁小罗盘） */
.adv-compass{width:26px;height:26px;flex:none;animation:compassSpin 24s linear infinite}
@keyframes compassSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.adv-compass{animation:none}}

/* 羊皮纸内容卡 */
.parch{position:relative;background:linear-gradient(160deg,#FFFDF4 0%,#FBF3DC 60%,#F5E9C8 100%);
  border:1.5px solid #D9BC85;border-radius:18px;padding:16px;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(138,107,31,.14), inset 0 1px 0 rgba(255,255,255,.9)}
.parch::before{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:radial-gradient(120px 40px at 8% 6%, rgba(201,162,39,.10), transparent 70%),
    radial-gradient(90px 30px at 94% 92%, rgba(201,162,39,.10), transparent 70%)}
.parch-hd{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:#5A3A12;letter-spacing:1px;position:relative}
.parch-hd svg{width:19px;height:19px;color:#C9A227}
.parch-hd .ph-sub{margin-left:auto;font-size:10.5px;font-weight:800;color:#A9843F;letter-spacing:1px}
.parch-tip{font-size:11.5px;color:#8A6B3A;margin-top:10px;line-height:1.6;position:relative;border-top:1px dashed #D9BC85;padding-top:10px}

/* 航行足迹（打卡印章 → 岛屿航程） */
.trek-days{display:flex;gap:9px;overflow-x:auto;padding:8px 2px 6px;scroll-behavior:smooth}
.trek-day{flex-shrink:0;width:52px;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.trek-day .td-iso{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#E9EFE2,#D8E2CC);border:2px dashed #B9C9A8;color:#93A87D;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.04);transition:all .35s;position:relative}
.trek-day .td-iso svg{width:22px;height:22px}
.trek-day .td-dot{width:5px;height:5px;border-radius:50%;background:#D5C295}
.trek-day b{font-size:10px;color:#9A7B45;font-weight:900;letter-spacing:.5px}
.trek-day::after{content:'';position:absolute;top:22px;left:calc(50% + 30px);width:9px;height:2px;
  background:repeating-linear-gradient(90deg,#C9A227 0 3px,transparent 3px 5px)}
.trek-day:last-child::after{display:none}
.trek-day.on .td-iso{background:linear-gradient(145deg,#F7C948,#D99A1F);border:2px solid #B87A12;color:#FFF6D8;
  box-shadow:0 4px 12px rgba(217,154,31,.45), inset 0 0 0 2px rgba(255,246,216,.5);animation:stampIn .45s cubic-bezier(.34,1.56,.64,1)}
.trek-day.on b{color:#A05E0B}
.trek-day.today .td-iso{box-shadow:0 0 0 4px rgba(217,154,31,.22)}
@keyframes stampIn{0%{transform:scale(.5) rotate(-14deg);opacity:0}60%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* 知识藏宝图（知识图鉴 → 宝箱卡） */
.treasure-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tres-card{position:relative;border:none;border-radius:16px;padding:13px 12px 11px;text-align:left;cursor:pointer;
  background:linear-gradient(165deg,#FFFDF4,#F6ECD2);border:1.5px solid #E2CB96;transition:transform .16s, box-shadow .16s;overflow:hidden}
.tres-card:active{transform:scale(.96)}
.tres-card::before{content:'';position:absolute;top:-18px;right:-18px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.14),transparent 70%)}
.tres-card .tc-top{display:flex;align-items:center;justify-content:space-between;position:relative}
.tres-card .tc-chest{width:46px;height:42px;display:flex;align-items:center;justify-content:center;color:#B09A62;transition:all .35s}
.tres-card .tc-chest svg{width:40px;height:40px}
.tres-card .tc-tag{font-size:9.5px;font-weight:900;color:#A9843F;background:#F6ECD2;border:1px solid #E2CB96;border-radius:999px;padding:3px 7px;letter-spacing:.5px}
.tres-card .tc-name{font-size:14px;font-weight:900;color:#5A3A12;margin-top:9px;position:relative;letter-spacing:.5px}
.tres-card .tc-point{font-size:10.5px;color:#9A7B45;line-height:1.5;margin-top:4px;min-height:32px;position:relative}
.tres-card .tc-stars{display:flex;gap:3px;margin-top:7px;position:relative}
.tres-card .tc-stars svg{width:13px;height:13px;color:#E0D3AC}
.tres-card .tc-stars .on{color:var(--gold);filter:drop-shadow(0 0 3px rgba(246,167,35,.6))}
.tres-card.lit{background:linear-gradient(160deg,#FFFDF4 0%,#FBF0D4 100%);border-color:#C9A227;
  box-shadow:0 8px 20px rgba(201,162,39,.22), 0 0 0 1px rgba(201,162,39,.15)}
.tres-card.lit .tc-chest{color:#C9A227;animation:chestGlow 2.6s ease-in-out infinite}
.tres-card.lit .tc-chest::after{content:'';position:absolute;top:-7px;width:14px;height:7px;border-radius:50% 50% 0 0;
  background:linear-gradient(90deg,transparent,#FFE9A8,transparent);opacity:0;transition:opacity .3s}
.tres-card.lit:hover .tc-chest::after{opacity:1}
.tres-card.lock{filter:saturate(.55)}
.tres-card.lock .tc-chest{color:#B8AA8A}
@keyframes chestGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(201,162,39,0))}50%{filter:drop-shadow(0 0 8px rgba(201,162,39,.55))}}

/* 船长头衔（称号 → 缎带徽章） */
.ribbon-row{display:flex;flex-wrap:wrap;gap:9px}
.ribbon{display:inline-flex;align-items:center;gap:6px;position:relative;
  background:linear-gradient(135deg,#D99A1F,#B87A12);color:#FFF6D8;border-radius:8px 8px 8px 2px;
  padding:7px 12px 7px 10px;font-size:12px;font-weight:900;letter-spacing:.5px;
  box-shadow:0 3px 8px rgba(184,122,18,.35)}
.ribbon::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(255,255,255,.25)}
.ribbon::after{content:'';position:absolute;right:-7px;top:0;bottom:0;width:7px;
  clip-path:polygon(0 0,100% 50%,0 100%);background:linear-gradient(135deg,#D99A1F,#B87A12)}
.ribbon svg{width:14px;height:14px;color:#FFF0C0}

/* 荣誉勋章墙（金属圆章） */
.medal-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:4px}
.medal{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;
  border-radius:14px;background:linear-gradient(170deg,#FFFDF4,#F2E5C6);border:1.5px solid #E2CB96;transition:transform .16s}
.medal:active{transform:scale(.94)}
.medal .md-medal{position:relative;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#FDF3D8 0%,#E4CB8C 55%,#C9A24B 100%);
  display:flex;align-items:center;justify-content:center;color:#8A6B1F;
  box-shadow:0 3px 8px rgba(138,107,31,.35), inset 0 2px 3px rgba(255,255,255,.7), inset 0 -3px 4px rgba(138,107,31,.25)}
.medal .md-medal::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  background:repeating-conic-gradient(rgba(201,162,39,.35) 0 8deg,transparent 8deg 16deg);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62% 100%);mask:radial-gradient(circle,transparent 60%,#000 62% 100%);opacity:.5}
.medal .md-medal svg{width:22px;height:22px}
.medal .md-name{font-size:10.5px;font-weight:900;color:#6B4A1B;text-align:center;line-height:1.35}
.medal .md-desc{font-size:9px;color:#A9843F;text-align:center;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.medal.locked{filter:saturate(.3);opacity:.72}
.medal.locked .md-medal{background:radial-gradient(circle at 32% 28%,#EFEAE0 0%,#CBC4B2 60%,#A9A290 100%);color:#8A8578;box-shadow:inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 4px rgba(0,0,0,.08)}
.medal.locked .md-name{color:#9A9487}
.medal.locked .md-desc{color:#B4AEA0}

/* 复习岛 → 归航修整港 */
.harbor-hd{position:relative;text-align:center;padding:22px 12px 14px;margin:-4px -16px 14px;overflow:hidden;
  background:linear-gradient(180deg,#E9F3EC 0%,transparent 100%);border-bottom:2px dashed #A9CDB0}
.harbor-hd .h-ava{width:58px;height:58px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#3EAD77,#1F8A57);border-radius:50%;color:#fff;box-shadow:0 5px 14px rgba(31,138,87,.4);border:3px solid #fff}
.harbor-hd .h-ava svg{width:30px;height:30px}
.harbor-hd h2{margin:0;font-size:18px;font-weight:900;color:#1F6B44;letter-spacing:1px}
.harbor-hd p{margin:5px 0 0;font-size:11.5px;color:#5D8F72;letter-spacing:.5px}
.reef-item{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(160deg,#FFFDF6,#F3F9F1);
  border:1.5px solid #CDE2D2;border-radius:16px;padding:12px 14px;margin-bottom:10px;box-shadow:0 4px 12px rgba(31,138,87,.10)}
.reef-item::before{content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:5px;border-radius:4px;
  background:linear-gradient(180deg,#5FC48C,#2FA36B)}
.reef-item .ri-ico{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.reef-item .ri-ico svg{width:23px;height:23px}
.reef-item .ri-main{flex:1;min-width:0}
.reef-item .ri-name{font-size:14.5px;font-weight:900;color:#1F6B44}
.reef-item .ri-msg{font-size:11.5px;color:#6A8F78;margin-top:3px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.reef-item .ri-count{margin-top:5px}
.reef-item .ri-count i{font-style:normal;font-size:10px;font-weight:900;color:#B87A12;background:#FFF3D6;border-radius:999px;padding:2px 8px;letter-spacing:.5px}
.reef-empty{text-align:center;padding:46px 20px;color:#5D8F72}
.reef-empty .re-ico{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#FFFDF6,#E8F4EA);border:2px dashed #A9CDB0;color:#5FC48C}
.reef-empty .re-ico svg{width:38px;height:38px}
.reef-empty p{font-size:13px;line-height:1.8;letter-spacing:.5px}

/* AI 小老师 → 藏宝阁（暗夜海蓝） */
.chat-overlay{background:
  radial-gradient(620px 280px at 82% -40px, rgba(255,213,120,.18), transparent 62%),
  radial-gradient(420px 220px at 8% 118%, rgba(47,183,192,.16), transparent 60%),
  radial-gradient(900px 500px at 50% 130%, rgba(20,60,90,.55), transparent 65%),
  linear-gradient(170deg,#0A3342 0%,#0D4356 55%,#092B3A 100%) !important;
  box-shadow:0 0 0 9999px rgba(4,20,30,.42) !important}
.chat-overlay .chat-head{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent) !important;border-bottom:1px solid rgba(255,255,255,.16) !important}
.chat-overlay .chat-ava{box-shadow:0 0 0 3px rgba(255,213,120,.35)}
.chat-overlay .chat-tip{background:rgba(255,255,255,.12) !important;color:#EAF6F8 !important;border:1px solid rgba(255,255,255,.18) !important;
  border-radius:14px;padding:9px 12px;font-size:12.5px;line-height:1.6;letter-spacing:.3px}
.chat-overlay .chat-bubble.bot{background:rgba(255,255,255,.14) !important;color:#F4FAFB !important;border:1px solid rgba(255,255,255,.18)}
.chat-overlay .chat-bubble.me{background:linear-gradient(135deg,#F6A723,#E88A12) !important;color:#5A3A00 !important}
.chat-overlay .chat-input-row{background:rgba(6,32,44,.72) !important;border-top:1px solid rgba(255,255,255,.14) !important;backdrop-filter:blur(6px)}
.chat-overlay .chat-input-row input{background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.22) !important;color:#fff !important}
.chat-overlay .chat-input-row input::placeholder{color:rgba(255,255,255,.55) !important}
.chat-overlay .chat-head .chat-sub{margin-left:2px;font-size:10.5px;font-weight:700;color:rgba(255,213,120,.85);letter-spacing:.5px;opacity:0;animation:fadeIn .4s .3s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ---------- 藏宝阁 v2：整屏暗夜 + 罗盘引导 + 快捷提问 ---------- */
.chat-overlay .chat-body{background:transparent !important;justify-content:center}
.chat-guide{text-align:center;margin:0 auto 14px;max-width:300px}
.chat-guide .cg-compass{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.06) 70%);
  border:1px solid rgba(255,213,120,.4);box-shadow:0 0 18px rgba(255,213,120,.22), inset 0 0 12px rgba(255,255,255,.08)}
.chat-guide .cg-compass svg{width:30px;height:30px}
.chat-guide b{display:block;font-size:17px;color:#FFE9BC;letter-spacing:2px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.chat-guide p{margin:6px 0 0;font-size:12.5px;color:rgba(215,238,242,.85);letter-spacing:.5px;line-height:1.7}
.chat-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:2px 18px}
.chat-chips .chip{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,213,120,.45);background:linear-gradient(160deg,rgba(255,213,120,.16),rgba(255,213,120,.04));
  color:#FFE9BC;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:transform .15s, box-shadow .15s, background .15s}
.chat-chips .chip:active{transform:scale(.95)}
.chat-chips .chip .ci{width:16px;height:16px;color:#FFD98A;flex:none}
.chat-chips .chip .ci svg{width:16px;height:16px;display:block}
.chat-guide + .chat-chips{margin-top:2px}
.chat-overlay .chat-tip{margin:8px auto 0;max-width:88%}

/* ---------- 文物修复师拼图 v2 ---------- */
.fix-hdr{display:flex;align-items:center;gap:10px;background:linear-gradient(160deg,#FFF9EC,#F5E8CC);
  border:1.5px solid #E4C98F;border-radius:16px;padding:9px 12px;margin:2px 0 12px;
  box-shadow:0 3px 10px rgba(140,100,40,.10)}
.fix-target{width:44px;height:44px;flex:none;border-radius:10px;overflow:hidden;background:#fff;
  border:1.5px solid #E4C98F;box-shadow:inset 0 0 0 3px #FBF3E0}
.fix-target canvas{width:40px;height:40px;display:block}
.fix-prog{flex:1;min-width:0}
.fix-prog .fp-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.fix-prog .fp-row b{font-size:10.5px;font-weight:800;color:#8A6B3A;letter-spacing:1px}
.fix-prog .fp-row u{font-size:10.5px;font-weight:900;color:#B87A12;font-style:normal}
.fix-prog i{display:block;height:8px;background:#EFE3C6;border-radius:999px;overflow:hidden}
.fix-prog i em{display:block;height:100%;background:linear-gradient(90deg,#F6A723,#F7C948);border-radius:999px;
  transition:width .35s cubic-bezier(.2,1.4,.4,1)}
.fix-steps{flex:none;text-align:center;background:#FFFDF6;border:1px dashed #E4C98F;border-radius:12px;padding:5px 10px}
.fix-steps b{display:block;font-size:10px;color:#8A6B3A;font-weight:800}
.fix-steps u{font-style:normal;font-size:17px;font-weight:900;color:#5A3A00;line-height:1.2}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:300px;margin:0 auto;width:100%}
.cell{position:relative;aspect-ratio:1;border:2px dashed #C9B07E;border-radius:14px;background:
  repeating-linear-gradient(45deg, rgba(244,232,205,.55) 0 8px, rgba(255,252,243,.55) 8px 16px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .2s, background .2s}
.cell > span{font-size:13px;font-weight:900;color:#D3BC8C;letter-spacing:1px}
.cell canvas{width:100%;height:100%;display:block;border-radius:12px}
.cell.filled{border-style:solid;border-color:#E4C98F;background:#fff}
.cell.pop{animation:cellPop .5s cubic-bezier(.2,1.6,.4,1)}
.cell.pop::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 3px rgba(246,167,35,.55), 0 0 22px 6px rgba(246,167,35,.35);animation:cellGlow .6s ease forwards}
@keyframes cellPop{0%{transform:scale(.9)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes cellGlow{to{box-shadow:0 0 0 0 rgba(246,167,35,0)}}
.pool{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px;padding:14px 12px;
  background:linear-gradient(160deg,#FBF3E0,#F2E4C4);border:1.5px dashed #E0C488;border-radius:18px;position:relative}
.pool::before{content:"碎片台";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#FFFDF6;border:1px solid #E4C98F;border-radius:999px;padding:1px 12px;
  font-size:10.5px;font-weight:800;color:#8A6B3A;letter-spacing:2px}
.tile{position:relative;width:88px;height:88px;padding:0;border:none;border-radius:12px;overflow:hidden;
  background:#fff;box-shadow:0 3px 8px rgba(140,100,40,.18);cursor:grab;touch-action:none;transition:transform .15s, box-shadow .15s}
.tile canvas{width:86px;height:86px;display:block}
.tile.sel{outline:3px solid #F6A723;outline-offset:2px;transform:scale(1.05);box-shadow:0 6px 16px rgba(246,167,35,.4)}
.tile.placed{display:none}
.tile.miss{animation:tileMiss .4s ease}
@keyframes tileMiss{0%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-4deg)}60%{transform:translateX(8px) rotate(3deg)}100%{transform:translateX(0)}}
@media (pointer:coarse){.tile{width:96px;height:96px}.tile canvas{width:94px;height:94px}.grid{max-width:320px}}

/* 国宝档案卡 */
.arch-overlay{position:fixed;inset:0;z-index:80;background:rgba(30,22,8,.62);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:22px}
.arch-card{position:relative;background:linear-gradient(170deg,#FFFDF6,#F3E5C8);border:2px solid #D9B26A;
  border-radius:24px;padding:26px 22px 20px;max-width:400px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(60,40,10,.4), inset 0 0 0 4px #FFFDF6, inset 0 0 0 5px #E9CE9A;
  animation:badgeIn .4s cubic-bezier(.2,1.6,.4,1)}
.arch-card::before,.arch-card::after{content:"";position:absolute;width:26px;height:26px;border:3px solid #D9B26A}
.arch-card::before{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.arch-card::after{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.arch-badge{display:inline-block;background:linear-gradient(135deg,#F6A723,#D98210);color:#FFF9EC;
  border-radius:999px;padding:4px 16px;font-size:12px;font-weight:900;letter-spacing:3px;
  box-shadow:0 3px 8px rgba(200,120,20,.35);margin-bottom:12px}
.arch-card h3{font-size:21px;font-weight:900;color:#5A3A00;letter-spacing:1px;margin:0 0 10px}
.arch-card p{font-size:14px;color:#6E5527;line-height:1.85;letter-spacing:.3px;margin:0 0 18px;text-align:left}
.arch-card .btn{width:100%;background:linear-gradient(135deg,#F6A723,#D98210);color:#FFF9EC;
  box-shadow:0 5px 14px rgba(200,120,20,.35)}