/* 练习界面：全屏、单任务、大按钮 */
body.pl-body {
  background:
    radial-gradient(circle at 1px 1px, rgba(191, 160, 120, .16) 1px, transparent 0) 0 0 / 22px 22px,
    #FFF8EE;
}
body.pl-body { --gold: #F2A93B; --ok: #2E7D64; --ok-soft: #E7F3EE; --no-soft: #FCEAE4; }

.pl-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.pl-top {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 700px; margin: 0 auto; padding: 18px 20px 8px;
}
.pl-exit {
  width: 40px; height: 40px; flex: none; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  display: grid; place-items: center; font-size: 15px; box-shadow: var(--shadow-sm);
}
.pl-exit:hover { color: var(--brand); border-color: var(--brand); }

/* 进度：一排小田字格，做一格填一格 */
.pl-dots { flex: 1; display: flex; gap: 5px; align-items: center; justify-content: center; }
.pl-dots i {
  width: 15px; height: 15px; border-radius: 4px; background: #fff;
  border: 1.5px solid #EBD9C2; transition: .25s; position: relative;
}
.pl-dots i::before, .pl-dots i::after {
  content: ""; position: absolute; background: #F0E2CC;
}
.pl-dots i::before { left: 50%; top: 2px; bottom: 2px; width: 1px; }
.pl-dots i::after { top: 50%; left: 2px; right: 2px; height: 1px; }
.pl-dots i.done { background: #2A2320; border-color: #2A2320; }
.pl-dots i.done::before, .pl-dots i.done::after { background: rgba(255,255,255,.25); }
.pl-dots i.now { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.pl-stars {
  display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 700;
  color: #B87A18; background: #FDF1DC; border-radius: 999px; padding: 5px 12px;
  min-width: 54px; justify-content: center; font-variant-numeric: tabular-nums;
}
.pl-stars.bump { animation: pl-bump .32s cubic-bezier(.2,.9,.3,1.5); }
@keyframes pl-bump { 40% { transform: scale(1.18); } }

/* 卡片 */
.pl-wrap { position: relative; width: 100%; max-width: 620px; margin: auto; padding: 0 16px 40px; }
.pl-stage {
  width: 100%; background: var(--card); border-radius: 30px; border: 1px solid #FBEFDD;
  box-shadow: var(--shadow); padding: 44px 34px 36px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* 小墨：练字时的陪伴角色 */
.mascot {
  position: absolute; top: -26px; left: 22px; width: 56px; height: 56px; z-index: 3;
  filter: drop-shadow(0 6px 10px rgba(60, 40, 20, .18));
  transform-origin: 50% 100%;
  animation: pl-float 4s ease-in-out infinite;
}
.mascot .pupil { animation: pl-blink 5.2s infinite; transform-origin: center; }
.mascot .mt { display: none; }
.mascot .mt-idle { display: block; }
.mascot.mood-happy .mt-idle, .mascot.mood-oops .mt-idle { display: none; }
.mascot.mood-happy .mt-happy { display: block; }
.mascot.mood-oops .mt-oops { display: block; }
.mascot.mood-happy { animation: pl-jump .5s ease; }
.mascot.mood-oops { animation: pl-wobble .4s ease; }
@keyframes pl-float { 50% { transform: translateY(-5px); } }
@keyframes pl-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes pl-jump { 40% { transform: translateY(-12px) scale(1.06); } }
@keyframes pl-wobble { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

/* 连对提示 */
.combo {
  position: absolute; top: -16px; right: 24px; z-index: 3;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 8px 18px rgba(216, 69, 47, .3);
  animation: pl-pop .3s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes pl-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.pl-counter {
  font-size: 12.5px; color: var(--ink-3); letter-spacing: .12em;
  margin: 0 0 10px; font-variant-numeric: tabular-nums;
}
.pl-hint { color: var(--ink-2); font-size: 17px; font-weight: 600; margin: 0 0 22px; text-align: center; }

.pl-char {
  font-family: var(--kai); font-size: 168px; line-height: 1;
  color: var(--ink); text-align: center;
}
.pl-char-box {
  width: 220px; height: 220px; border: 2px solid var(--brand); border-radius: 12px;
  background: #FFFDF8; display: grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 6px #FFF8EE;
}
.pl-char-box::before, .pl-char-box::after {
  content: ""; position: absolute; pointer-events: none; border: dashed #EFD8BE; border-width: 0;
}
.pl-char-box::before { left: 50%; top: 0; bottom: 0; border-left-width: 1px; }
.pl-char-box::after { top: 50%; left: 0; right: 0; border-top-width: 1px; }
.pl-char-box .pl-char { font-size: 150px; }

.pl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 30px; }
.pl-opt {
  font: inherit; font-size: 21px; font-weight: 600; padding: 16px 10px;
  border: 2px solid #F1E4D2; border-radius: 16px; background: #fff;
  color: var(--ink); cursor: pointer; transition: .14s; letter-spacing: .02em;
}
.pl-opt:hover { border-color: #E0C8A8; transform: translateY(-1px); }
.pl-opt:active { transform: scale(.97); }
.pl-opt.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); animation: pl-ok .3s ease; }
.pl-opt.no { border-color: var(--brand); background: var(--no-soft); color: var(--brand); animation: pl-shake .3s; }
.pl-opt:disabled { cursor: default; transform: none; }
.pl-opt-char { font-family: var(--kai); font-size: 40px; font-weight: 400; }

@keyframes pl-ok { 40% { transform: scale(1.05); } }
@keyframes pl-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.pl-word {
  font-family: var(--kai); font-size: 86px; letter-spacing: .08em;
  line-height: 1.2; text-align: center; margin: 4px 0 0;
}
.pl-word .blank {
  display: inline-block; width: .92em; height: .92em; vertical-align: -.1em;
  border: 3px dashed #E2C9A6; border-radius: 14px; margin: 0 .05em; background: #FFFBF4;
}

.pl-writer-wrap { display: flex; justify-content: center; }
.pl-writer {
  width: min(300px, 74vw); height: min(300px, 74vw);
  border: 2px solid var(--brand); border-radius: 12px; background: #FFFDF8;
  position: relative; box-shadow: inset 0 0 0 6px #FFF8EE;
}
.pl-writer::before, .pl-writer::after {
  content: ""; position: absolute; pointer-events: none; border: dashed #EFD8BE; border-width: 0;
}
.pl-writer::before { left: 50%; top: 0; bottom: 0; border-left-width: 1px; }
.pl-writer::after { top: 50%; left: 0; right: 0; border-top-width: 1px; }
.pl-writer svg { width: 100%; height: 100%; }
.pl-tip { color: var(--ink-3); font-size: 14px; margin-top: 16px; min-height: 1.5em; text-align: center; }

.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 16px; font-weight: 600; padding: 14px 26px; border-radius: 15px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: .15s;
}
.pl-btn:hover { border-color: #E0C8A8; transform: translateY(-1px); }
.pl-btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 8px 20px rgba(216, 69, 47, .26);
}
.pl-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* 结算 */
.pl-done { text-align: center; width: 100%; }
.pl-done-stars { font-size: 52px; color: var(--gold); letter-spacing: .1em; line-height: 1.2; }
.pl-done-stars .off { color: #F1E4D2; }
.pl-done-title { font-size: 26px; font-weight: 800; margin: 14px 0 6px; letter-spacing: -.01em; }
.pl-done-sub { color: var(--ink-3); font-size: 14.5px; margin: 0; }
.pl-missed { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 4px; }
.pl-missed a {
  font-family: var(--kai); font-size: 30px; width: 62px; height: 62px;
  border-radius: 14px; background: #fff; border: 1.5px solid #F1E4D2;
  display: grid; place-items: center;
}
.pl-missed a:hover { border-color: var(--brand); color: var(--brand); }
.pl-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* 过关印章 */
.seal {
  width: 96px; height: 96px; margin: 0 auto 10px; border: 3px solid var(--brand);
  border-radius: 50%; color: var(--brand); display: grid; place-items: center;
  font-family: var(--kai); font-size: 30px; letter-spacing: .08em;
  transform: rotate(-9deg); opacity: .92;
  animation: pl-stamp .5s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes pl-stamp {
  0% { transform: rotate(-9deg) scale(2.4); opacity: 0; }
  60% { transform: rotate(-9deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-9deg) scale(1); opacity: .92; }
}

/* 撒花 */
.pl-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.pl-confetti i {
  position: absolute; top: -14px; width: 9px; height: 15px; opacity: .95;
  background: var(--c, #F2A93B); border-radius: 3px;
  animation: pl-fall 1.7s ease-in forwards;
}
@keyframes pl-fall {
  0% { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(96vh) rotate(460deg); opacity: 0; }
}

@media (max-width: 560px) {
  .pl-top { padding: 12px 14px 4px; gap: 10px; }
  .pl-dots { gap: 3px; }
  .pl-dots i { width: 11px; height: 11px; border-radius: 3px; }
  .pl-wrap { padding: 0 12px 24px; }
  .pl-stage { padding: 26px 18px 28px; border-radius: 24px; }
  .mascot { width: 46px; height: 46px; top: -22px; left: 16px; }
  .pl-char-box { width: 176px; height: 176px; }
  .pl-char-box .pl-char { font-size: 118px; }
  .pl-opts { gap: 10px; margin-top: 24px; }
  .pl-opt { font-size: 19px; padding: 15px 8px; }
  .pl-word { font-size: 62px; }
  .pl-done-title { font-size: 22px; }
  .pl-done-stars { font-size: 40px; }
  .seal { width: 82px; height: 82px; font-size: 26px; }
}
.pl-dots i::before, .pl-dots i::after { background: #F7ECDA; }
.pl-dots i.done::before, .pl-dots i.done::after { background: rgba(255,255,255,.22); }