/* ═══════════════════════════════════════════════════════════
   home.css — 主页（打开就上课）
   基准：V14-中央椭圆极繁彩铅版
   ═══════════════════════════════════════════════════════════ */

body{overflow:hidden}
.page{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}

/* 右上角计分（人物配对暖场小游戏） */
.game-meta{position:fixed;z-index:20;right:clamp(16px,3.3vw,52px);top:82px;display:flex;align-items:center;gap:10px}
.score{min-width:58px;color:var(--ink);font:700 10px/1 var(--sans);letter-spacing:.12em;text-align:right}
.score b{color:var(--red);font:400 25px/1 var(--marker);letter-spacing:0}
.reset-game{display:grid;width:35px;aspect-ratio:1;place-items:center;border:2px solid var(--ink-72);border-radius:50%;background:rgba(255,249,234,.72);color:var(--ink);font:400 20px/1 var(--marker);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.reset-game:hover{background:var(--yellow);transform:rotate(-12deg)}

/* 人物场 */
.character-field{position:absolute;z-index:2;inset:5vh 0 6.5vh;pointer-events:none}
.person-card{
  position:absolute;left:var(--x);top:var(--y);z-index:var(--z);
  width:var(--size);aspect-ratio:3/4;padding:0;border:0;background:transparent;
  pointer-events:auto;transform:translate(-50%,-50%) rotate(var(--tilt));transform-origin:50% 83%;
  transition:filter .2s ease,opacity .35s ease,transform .35s var(--ease);
}
.person-card:hover{z-index:14;filter:drop-shadow(0 7px 0 rgba(49,95,159,.12));transform:translate(-50%,-52%) rotate(0) scale(1.04)}
.person-card:focus-visible{outline:0}
.sprite-window{position:absolute;inset:0;overflow:hidden}
.sprite-window img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 4px 1px rgba(38,58,84,.13))}
.person-card[data-pose="0"] .sprite-window img{left:0}
.person-card[data-pose="1"] .sprite-window img{left:-100%}
.person-card::before,.person-card::after{content:"";position:absolute;z-index:3;pointer-events:none;opacity:0}
.person-card::before{inset:-7% -13%;border:4px solid var(--yellow);border-radius:49% 53% 47% 55% / 52% 47% 55% 49%;transform:rotate(-4deg) scale(.86);transition:opacity .14s ease,transform .2s ease}
.person-card.selected{z-index:15;filter:drop-shadow(0 8px 0 rgba(240,200,77,.28));transform:translate(-50%,-54%) rotate(0) scale(1.055)}
.person-card.selected::before{opacity:1;transform:rotate(-2deg) scale(1)}
.person-card.wrong{animation:wrong-shake .36s ease}
.person-card.matched{z-index:16;cursor:default;filter:drop-shadow(0 0 9px rgba(217,77,61,.28))}
.person-card.matched::before{opacity:1;border-color:var(--red);animation:match-ring .72s ease forwards}
.person-card.matched::after{left:50%;top:42%;width:18px;aspect-ratio:1;border-radius:50%;background:var(--yellow);box-shadow:-29px -24px 0 -4px var(--blue),31px -18px 0 -5px var(--red),-24px 28px 0 -5px var(--red),28px 29px 0 -4px var(--blue),0 -39px 0 -6px var(--yellow);opacity:1;animation:match-spark .7s ease forwards}
.person-card.archived{opacity:0;transform:translate(-50%,-60%) rotate(var(--tilt)) scale(.72);pointer-events:none}

/* 中央舞台 */
.center-stage{position:absolute;z-index:8;left:50%;top:43%;width:min(900px,82vw);transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.welcome{margin:0 0 -2px;color:var(--blue);font:400 clamp(1.7rem,3vw,3.4rem)/1 var(--marker);letter-spacing:.06em;text-shadow:0 2px 0 var(--paper),0 0 14px var(--paper);transform:rotate(-1.2deg)}
.title-paper{position:absolute;z-index:-1;left:50%;top:58%;width:min(780px,79vw);height:clamp(190px,22vw,285px);background:rgba(255,249,234,.91);clip-path:polygon(4% 9%,23% 3%,48% 7%,71% 1%,97% 11%,93% 40%,100% 68%,90% 93%,66% 97%,42% 92%,17% 99%,2% 86%,7% 58%,0 30%);transform:translate(-50%,-50%) rotate(-.4deg);box-shadow:0 14px 0 rgba(38,58,84,.06)}
.main-title{display:flex;justify-content:center;gap:.015em;margin:0;font:400 clamp(5rem,11vw,12rem)/.82 var(--marker);letter-spacing:-.08em;text-shadow:0 3px 0 var(--paper),0 0 18px var(--paper)}
.main-title span:nth-child(1){color:var(--ink);transform:rotate(-3deg)}
.main-title span:nth-child(2){color:var(--red);transform:translateY(-7px) rotate(2deg)}
.main-title span:nth-child(3){color:var(--blue);transform:rotate(-1deg)}
.main-title span:nth-child(4){color:var(--ink);transform:translateY(4px) rotate(3deg)}
.underline{width:min(490px,60vw);height:12px;margin:14px auto;background:var(--yellow);border-radius:62% 48% 55% 42%;transform:rotate(-1.4deg)}

/* 继续上课 */
.resume{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border:0;background:rgba(255,249,234,.84);color:var(--ink);text-align:left;pointer-events:auto;transform:rotate(-1deg);transition:transform var(--dur) var(--ease)}
.resume:hover{transform:rotate(0) translateY(-2px)}
.resume::before{content:"▶";display:grid;width:31px;aspect-ratio:1;place-items:center;border-radius:50%;background:var(--red);color:var(--paper);font-size:9px}
.resume small{display:block;color:var(--muted);font:700 8px/1.25 var(--sans);letter-spacing:.12em}
.resume strong{font:400 15px/1.45 var(--marker)}
.resume[hidden]{display:none}

.fact-toast{position:fixed;z-index:24;left:50%;bottom:78px;max-width:min(510px,78vw);padding:8px 15px;background:rgba(255,249,234,.94);border-left:5px solid var(--yellow);box-shadow:0 6px 18px rgba(38,58,84,.1);color:var(--ink);font:400 14px/1.45 var(--marker);opacity:0;transform:translate(-50%,12px) rotate(-.5deg);transition:opacity .22s,transform .25s;pointer-events:none}
.fact-toast.show{opacity:1;transform:translate(-50%,0) rotate(-.5deg)}
.completion-mark{position:fixed;z-index:25;left:50%;top:67%;padding:9px 18px;border:3px double var(--red);background:rgba(255,249,234,.94);color:var(--red);font:400 22px/1 var(--marker);opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.5);pointer-events:none}
.completion-mark.show{animation:completion-stamp .6s cubic-bezier(.17,.84,.25,1.2) forwards}

/* 底部课点条 */
.bottom{position:fixed;z-index:22;left:4vw;right:4vw;bottom:17px;display:grid;grid-template-columns:135px 1fr 96px;align-items:center;gap:18px}
.bottom-label{font:400 13px/1.35 var(--marker);text-shadow:0 0 10px var(--paper)}
.bottom-label button{display:block;margin-top:2px;padding:0;border:0;background:transparent;color:var(--blue);font:700 10px/1 var(--sans);letter-spacing:.1em;text-decoration:underline dotted}
.rail .lesson-point{width:11px;border-color:var(--paper)}
.count{text-align:right;font:700 9px/1.4 var(--sans)}
.count b{display:block;color:var(--red);font:400 25px/1 var(--marker)}

@keyframes wrong-shake{0%,100%{margin-left:0}25%{margin-left:-8px}50%{margin-left:7px}75%{margin-left:-4px}}
@keyframes match-ring{0%{transform:rotate(-4deg) scale(.76);opacity:0}35%{opacity:1}100%{transform:rotate(6deg) scale(1.2);opacity:0}}
@keyframes match-spark{0%{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.65) rotate(35deg);opacity:0}}
@keyframes completion-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1.7)}55%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

@media(max-width:760px){
  .top-label{left:16px;top:18px}
  .game-meta{right:12px;top:62px}
  .floating-actions{top:9px;right:8px;gap:3px}
  .float-btn{min-height:38px;padding:0 12px;font-size:11px}
  .character-field{inset:5.5vh 0 8vh}
  .center-stage{top:41%;width:98vw}
  .welcome{font-size:clamp(1.35rem,7vw,2.2rem);margin-bottom:2px}
  .title-paper{top:61%;width:94vw;height:195px}
  .main-title{font-size:clamp(4.2rem,21vw,6.5rem)}
  .underline{width:58vw;height:9px;margin:8px auto 10px}
  .resume{max-width:78vw;padding:5px 8px}
  .resume small{display:none}
  .resume strong{font-size:12px}
  .bottom{left:14px;right:14px;bottom:8px;grid-template-columns:1fr auto}
  .rail{grid-column:1/-1;grid-row:2;gap:10px;overflow-x:auto;padding:4px 1px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .lesson-point{flex:0 0 9px}
  .bottom-label{font-size:11px}
  .count b{font-size:20px}
  .fact-toast{bottom:70px;font-size:12px;padding:6px 10px}
}