/* ==========================================================================
   练习游戏化 —— 游戏横幅、连击条、任务、奖励、强反馈动效
   依赖 capy.css 的配色变量；本文件只做「游戏层」，不改动基础排版。
   原则：
     1) 动效全部可降级：prefers-reduced-motion 下只保留文字；
     2) 不引任何图片，图标用 emoji；
     3) 与卡皮巴拉卡通皮肤同风格：粗描边 + 贴纸阴影 + 糖果色。
   ========================================================================== */

/* ---------------------------------------------------------------- 横幅 ---- */
.game-banner {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 14px 26px 0;
  padding: 10px 18px;
  background: linear-gradient(120deg, #fffaf0, #fff2dd);
  border: 3px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 rgba(74, 54, 35, .16);
}
.gb-left { display: flex; align-items: center; gap: 12px; }
.gb-level { position: relative; width: 60px; height: 60px; flex: none; }
.gb-ring { width: 60px; height: 60px; transform: rotate(-90deg); }
.gb-ring-bg { fill: none; stroke: #f0e2cb; stroke-width: 6; }
.gb-ring-fill {
  fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .5s ease-out;
}
.gb-lv {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05;
}
.gb-lv span { font-size: 9px; font-weight: 800; color: #b08a5e; letter-spacing: .5px; }
.gb-lv b { font-size: 19px; font-weight: 900; color: #d97c22; }
.gb-xp { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; color: #8d7357; }
.gb-xp b { color: #6b543c; }
.gb-xp span { font-variant-numeric: tabular-nums; color: #d97c22; }

.gb-mid {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 16px; border-radius: 999px;
  background: #fff; border: 3px solid var(--stroke);
  box-shadow: 0 3px 0 rgba(74, 54, 35, .2);
}
.gb-combo-label { font-size: 12px; font-weight: 800; color: #8d7357; }
.gb-combo {
  font-size: 24px; font-weight: 900; color: #c3b29a;
  font-variant-numeric: tabular-nums; transition: color .2s, transform .2s;
}
.gb-combo.on { color: #d97c22; }
.gb-combo.fire {
  color: #e34f20;
  text-shadow: 0 0 10px rgba(255, 150, 60, .9);
}
.gb-fire { font-size: 17px; opacity: .3; transition: opacity .2s, transform .2s; }
.gb-combo.fire + .gb-fire { opacity: 1; animation: gbFire .7s ease-in-out infinite alternate; }
@keyframes gbFire {
  from { transform: scale(1) rotate(-4deg); }
  to { transform: scale(1.22) rotate(6deg); }
}
.gb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.gb-coin {
  font-size: 14px; font-weight: 800; color: #b8591a;
  background: #fff4e0; border: 3px solid var(--stroke);
  border-radius: 999px; padding: 4px 14px;
  box-shadow: 0 3px 0 rgba(74, 54, 35, .18);
  font-variant-numeric: tabular-nums;
}
.gb-sound {
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  color: #6b543c; background: #fffaf1;
  border: 3px solid var(--stroke); border-radius: 999px;
  padding: 6px 13px; box-shadow: 0 3px 0 rgba(74, 54, 35, .2);
  transition: transform .1s, box-shadow .1s;
}
.gb-sound:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(74, 54, 35, .2); }

/* ------------------------------------------------------------- 连击条 ---- */
.combo-bar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 12px;
  border: 3px dashed #eddcc0; border-radius: 18px; background: #fffdf8;
}
.combo-bar.on { border-style: solid; border-color: #f0b661; background: #fff8e9; }
.combo-bar.fire {
  border-color: var(--brand);
  background: linear-gradient(100deg, #fff2d8, #ffe3c2);
  box-shadow: inset 0 0 0 2px rgba(255, 190, 100, .5);
}
.cb-label { font-size: 13px; font-weight: 800; color: #8d7357; }
.combo-bar b { font-size: 20px; font-weight: 900; color: #c3b29a; font-variant-numeric: tabular-nums; }
.combo-bar.on b { color: #d97c22; }
.combo-bar.fire b { color: #e34f20; }
.cb-track {
  flex: 1; min-width: 110px; height: 12px; border-radius: 999px;
  background: #f4e8d5; border: 2px solid var(--stroke); overflow: hidden;
}
.cb-track > i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(115deg, #ffc46b 0 9px, #f2913d 9px 18px);
  transition: width .3s ease-out;
}
.combo-bar.fire .cb-track > i {
  background: repeating-linear-gradient(115deg, #ff9a5b 0 9px, #e34f20 9px 18px);
}
.cb-tip {
  font-size: 12px; font-weight: 700; color: #a08a70;
  flex: 1 1 168px; min-width: 0; text-align: right;
}
@media (max-width: 520px) { .cb-tip { text-align: left; flex-basis: 100%; } }

/* 加速题：练习卡整体换色 + 轻微脉动 */
#panePractice.fast-mode {
  border-color: #f2913d;
  background: linear-gradient(180deg, #fffaf0, #fff4e4);
  box-shadow: 0 0 0 5px rgba(242, 145, 61, .18), var(--shadow);
}
#panePractice.fast-mode #quizDiff { background: #ffe1c2; border-color: #e34f20; color: #b4453f; }

/* ------------------------------------------------------- 答题冲击波 ---- */
@keyframes hitOk {
  0% { box-shadow: 0 0 0 0 rgba(62, 180, 137, .75), var(--shadow); }
  70% { box-shadow: 0 0 0 16px rgba(62, 180, 137, 0), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(62, 180, 137, 0), var(--shadow); }
}
@keyframes hitMega {
  0% { box-shadow: 0 0 0 0 rgba(242, 145, 61, .85), var(--shadow); }
  60% { box-shadow: 0 0 0 26px rgba(255, 190, 90, 0), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(255, 190, 90, 0), var(--shadow); }
}
@keyframes hitBad {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
#panePractice.hit-ok { animation: hitOk .8s ease-out; }
#panePractice.hit-mega { animation: hitMega .9s ease-out; }
#panePractice.hit-bad { animation: hitBad .42s ease-in-out; }

/* ------------------------------------------------- 中央大字强反馈 ---- */
.win-banner {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.6);
  z-index: 90;
  pointer-events: none;
  padding: 14px 30px;
  border-radius: 26px;
  border: 4px solid var(--stroke);
  background: #fffdf7;
  box-shadow: 0 8px 0 rgba(74, 54, 35, .22);
  text-align: center; opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
  font-weight: 900;
  backdrop-filter: blur(1px);
}
@media (min-width: 821px) { .win-banner { top: 34%; } }
.win-banner.show {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  animation: wbPop .42s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes wbPop {
  0% { transform: translate(-50%, -50%) scale(.55) rotate(-4deg); }
  65% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
.win-banner b { font-size: 42px; color: #d97c22; display: block; line-height: 1.1; }
.win-banner.ok { background: linear-gradient(160deg, #f0ffe4, #ddffd6); }
.win-banner.great { background: linear-gradient(160deg, #fff3cf, #ffe0a8); }
.win-banner.bad { background: #fff0ef; }
.win-banner.bad b { font-size: 24px; color: #b4453f; }
.win-banner.fast b { font-size: 30px; color: #e34f20; }
.win-banner .wb-combo { font-size: 16px; font-weight: 900; color: #b8591a; display: block; margin-top: 2px; }
.win-banner .wb-t { font-size: 14px; font-weight: 800; color: #8d7357; }
.win-banner .wb-stars { font-size: 34px; letter-spacing: 4px; color: #e6d5ba; line-height: 1.2; }
.win-banner .wb-star.on { color: #ffb11b; text-shadow: 0 2px 0 #b9770f; }
.win-banner .wb-sub { font-size: 15px; font-weight: 900; color: #b8591a; }

/* ------------------------------------------------------------ 彩纸 ---- */
.fx-layer {
  position: fixed; inset: 0; z-index: 95;
  pointer-events: none; overflow: hidden;
}
.fx-bit {
  position: absolute;
  will-change: transform, opacity;
  animation-name: fxFly;
  animation-timing-function: cubic-bezier(.15, .75, .3, 1);
  animation-fill-mode: both;
  filter: drop-shadow(0 2px 2px rgba(74, 54, 35, .18));
}
@keyframes fxFly {
  0% { transform: translate(0, 0) rotate(0) scale(.5); opacity: 0; }
  15% { opacity: 1; transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .25)) rotate(calc(var(--rot) * .2)) scale(1.15); }
  100% { transform: translate(var(--dx), calc(var(--dy) * 2.1)) rotate(var(--rot)) scale(.85); opacity: 0; }
}

/* ----------------------------------------------------------- 任务 ---- */
.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest {
  border: 3px solid var(--line); border-radius: 16px;
  padding: 9px 11px; background: #fffefb;
  transition: border-color .15s, background .15s;
}
.quest.done { border-color: #2f9c74; background: #f2ffe9; }
.quest .qt { font-size: 13px; font-weight: 800; color: #4a3623; display: flex; gap: 6px; align-items: center; }
.quest .qi { font-size: 15px; }
.quest .qbar {
  height: 10px; border-radius: 999px; margin: 6px 0 4px;
  background: #f4e8d5; border: 2px solid var(--stroke); overflow: hidden;
}
.quest .qbar > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(115deg, #b6e39a 0 8px, #86cf6b 8px 16px);
  transition: width .35s ease-out;
}
.quest.done .qbar > i { background: repeating-linear-gradient(115deg, #7fe0b4 0 8px, #3eb489 8px 16px); }
.quest .qm { font-size: 11.5px; font-weight: 700; color: #a08a70; }

/* ----------------------------------------------------------- 奖励 ---- */
.reward-panel {
  border: 3px dashed #eddcc0; border-radius: 18px;
  padding: 10px 12px; background: #fffdf8;
  font-size: 13px; color: #8d7357;
}
.reward-panel.show {
  border-style: solid; border-color: var(--stroke);
  background: linear-gradient(160deg, #fffaf0, #fff2dd);
  box-shadow: 0 4px 0 rgba(74, 54, 35, .14);
}
.rw-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 900; color: #4a3623;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 2px dotted var(--line);
}
.rw-ico { font-size: 22px; }
.rw-stars { margin-left: auto; color: #ffb11b; font-size: 17px; letter-spacing: 2px; font-weight: 900; }
.rw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.rw-cell {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 12px; font-weight: 700; color: #8d7357;
}
.rw-cell b { color: #d97c22; font-size: 13px; }
.rw-quest {
  margin-top: 9px; padding: 7px 10px; border-radius: 12px;
  background: #fff0cf; border: 2px dashed #e9b96e;
  color: #8a5b12; font-size: 12px; font-weight: 800;
}
.rw-xp {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12px; font-weight: 900; color: #8d7357;
}
.rw-bar {
  flex: 1; height: 10px; border-radius: 999px;
  background: #f4e8d5; border: 2px solid var(--stroke); overflow: hidden;
}
.rw-bar > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(115deg, #ffd166 0 8px, #f2913d 8px 16px);
  transition: width .5s ease-out;
}
.rw-foot {
  margin-top: 9px; padding-top: 8px; border-top: 2px dotted var(--line);
  font-size: 11.5px; font-weight: 800; color: #a08a70;
}

/* ----------------------------------------------------------- 窄屏 ---- */
@media (max-width: 820px) {
  .game-banner { margin: 12px 14px 0; padding: 9px 12px; gap: 10px; }
  .gb-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .gb-xp { display: none; }
  .win-banner b { font-size: 32px; }
  .rw-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- 减动效偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .gb-combo.fire + .gb-fire { animation: none; }
  #panePractice.hit-ok, #panePractice.hit-mega, #panePractice.hit-bad { animation: none; }
  .win-banner.show { animation: none; }
  .fx-layer { display: none; }
  .gb-ring-fill, .cb-track > i, .quest .qbar > i, .rw-bar > i { transition: none; }
}