/* ===========================================================
   《当声音有了魔法》互动游戏样式
   面向五年级学生 · 魔法/星空主题
   =========================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --purple: #7b5be6;
  --blue:   #3aa0ff;
  --ice:    #4fc3f7;
  --warm:   #ff9a6c;
  --gold:   #ffcb3d;
  --ink:    #2c2a44;
  --soft:   #f3f1fb;
}

html, body { margin: 0; padding: 0; }

body {
  font-family: "Microsoft YaHei", -apple-system, "PingFang SC", "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 20% 10%, #6a4ed6 0, transparent 40%),
              radial-gradient(circle at 80% 90%, #2f86e0 0, transparent 45%),
              linear-gradient(135deg, #5b3fbe, #7b5be6 45%, #3aa0ff);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 飘动的小星星装饰 */
.stars-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.stars-bg span {
  position: absolute; color: rgba(255,255,255,.7); font-size: 14px;
  animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle { 0%,100%{opacity:.2; transform:scale(.8);} 50%{opacity:1; transform:scale(1.2);} }

.wrap { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 18px 14px 60px; }

/* 顶部标题 */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px;
          color:#fff; margin-bottom: 14px; }
.topbar h1 { font-size: 22px; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.topbar .who { font-size: 13px; background: rgba(255,255,255,.2); padding: 6px 12px; border-radius: 20px; }

/* 关卡进度条 */
.progress { display:flex; gap:8px; margin-bottom: 16px; }
.progress .step {
  flex:1; text-align:center; padding:9px 4px; border-radius: 12px; font-size: 13px; font-weight:700;
  background: rgba(255,255,255,.16); color:#fff; border: 2px solid transparent; transition:.25s;
}
.progress .step.active { background:#fff; color: var(--purple); transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.progress .step.done   { background: rgba(255,255,255,.32); }

/* 卡片面板 */
.panel {
  background:#fff; border-radius: 22px; padding: 24px 22px; box-shadow: 0 18px 45px rgba(20,10,60,.28);
  animation: pop .35s ease;
}
@keyframes pop { from{opacity:0; transform: translateY(14px) scale(.98);} to{opacity:1; transform:none;} }

.panel h2 { margin: 0 0 4px; color: var(--purple); font-size: 20px; }
.panel .desc { color:#8a86a6; font-size: 13px; margin-bottom: 18px; line-height:1.6; }

/* 通用按钮 */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; cursor:pointer; font-weight:700; font-size:15px;
  padding: 13px 26px; border-radius: 14px; color:#fff;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  box-shadow: 0 8px 18px rgba(123,91,230,.4); transition: transform .12s, opacity .2s;
}
.btn:hover { opacity:.93; }
.btn:active { transform: scale(.96); }
.btn.ghost { background:#fff; color: var(--purple); border:2px solid #e7e2fb; box-shadow:none; }
.btn.warm  { background: linear-gradient(135deg,#ff8a5b,#ff5e8a); box-shadow:0 8px 18px rgba(255,110,120,.4); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; }

/* ====== 开始页 ====== */
.start { text-align:center; padding: 30px 18px; }
.start .magic { font-size: 64px; animation: float 3s infinite ease-in-out; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.start h2 { font-size: 26px; }
.start p { color:#8a86a6; line-height:1.8; }
.start input {
  width: 260px; max-width: 80%; padding: 12px 16px; border-radius: 12px; border:2px solid #e7e2fb;
  font-size: 15px; text-align:center; margin: 14px 0 4px;
}
.start input:focus { outline:none; border-color: var(--purple); }

/* ====== 第一关 拖拽 ====== */
.zones { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 560px){ .zones { grid-template-columns: 1fr; } }

.zone {
  min-height: 120px; border-radius: 18px; padding: 14px; transition:.2s;
  border: 3px dashed transparent;
}
.zone .zone-title { font-weight:800; font-size:15px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.zone.ice  { background: linear-gradient(160deg,#e3f6ff,#cfeeff); }
.zone.ice  .zone-title { color:#1b87c9; }
.zone.warm { background: linear-gradient(160deg,#fff0e6,#ffe0cf); }
.zone.warm .zone-title { color:#e8753a; }
.zone.over { border-color: var(--purple); transform: scale(1.01); }

.pool {
  background: var(--soft); border-radius: 18px; padding: 14px; min-height: 80px;
  display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;
}
.zone .cards { display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; min-height: 40px; }

.card {
  background:#fff; border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height:1.5;
  box-shadow: 0 4px 12px rgba(60,40,120,.15); cursor: grab; user-select:none;
  max-width: 100%; border:2px solid transparent; touch-action: none;
}
.card:active { cursor: grabbing; }
.card.selected { border-color: var(--purple); box-shadow:0 6px 16px rgba(123,91,230,.4); }
.card.dragging { opacity:.4; }
.card.right { border-color:#37c98b; background:#eafff4; }
.card.wrong { border-color:#ff6a6a; background:#fff0f0; }
.card .tag-correct { font-size:11px; color:#37c98b; margin-left:6px; }
.card .tag-wrong   { font-size:11px; color:#ff6a6a; margin-left:6px; }

.drag-ghost {
  position: fixed; z-index: 9999; pointer-events:none; background:#fff; border-radius:12px;
  padding:10px 14px; font-size:14px; box-shadow:0 12px 30px rgba(0,0,0,.3); max-width: 280px;
  border:2px solid var(--purple);
}
.pool-label { font-size:12px; color:#a59fc4; margin-bottom:8px; font-weight:700; }

/* ====== 第二关 ====== */
.scenario-tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.scenario-tabs button {
  border:2px solid #e7e2fb; background:#fff; color:var(--purple); border-radius:20px;
  padding:7px 16px; font-size:13px; font-weight:700; cursor:pointer;
}
.scenario-tabs button.active { background:var(--purple); color:#fff; border-color:var(--purple); }

.original-box {
  background: linear-gradient(160deg,#eef0ff,#e3e8ff); border-radius:14px; padding:14px 16px;
  margin-bottom:14px; border-left:5px solid #8a7bff;
}
.original-box .lbl { font-size:12px; color:#8a86a6; font-weight:700; }
.original-box .txt { font-size:16px; margin-top:4px; color:#4b3fa0; }

.magic-hints { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.magic-hints span { font-size:12px; background:#f0ecff; color:#7b5be6; padding:5px 10px; border-radius:8px; }

textarea.answer, input.answer {
  width:100%; border:2px solid #e7e2fb; border-radius:14px; padding:13px 15px; font-size:15px;
  font-family:inherit; resize:vertical; line-height:1.6;
}
textarea.answer:focus, input.answer:focus { outline:none; border-color:var(--purple); }

/* 评分结果 */
.result-box { margin-top:18px; border-radius:16px; padding:18px; background:var(--soft); animation: pop .3s ease; }
.stars { font-size:30px; letter-spacing:4px; margin-bottom:8px; }
.stars .on { color: var(--gold); }
.stars .off { color:#d8d4e8; }
.elements { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 12px; }
.elements .el { font-size:12px; padding:5px 11px; border-radius:20px; font-weight:700; }
.elements .el.yes { background:#eafff4; color:#1a9e57; }
.elements .el.no  { background:#fff0f0; color:#d35; }
.feedback-text { font-size:15px; line-height:1.7; color:#3a3760; }
.engine-badge { font-size:11px; color:#b3aed0; margin-top:10px; }

/* ====== 第三关 ====== */
.field { margin-bottom:14px; }
.field label { display:block; font-weight:700; font-size:14px; margin-bottom:6px; color:#4b3fa0; }
.field .sub { font-size:12px; color:#a59fc4; font-weight:400; }

.loading { display:inline-flex; align-items:center; gap:8px; color:#7b5be6; font-weight:700; }
.spinner { width:18px;height:18px;border:3px solid #e0d8fb;border-top-color:#7b5be6;border-radius:50%;
           animation: spin .8s linear infinite; }
@keyframes spin { to{ transform: rotate(360deg);} }

/* 通关页 */
.finish { text-align:center; padding: 24px; }
.finish .trophy { font-size:72px; animation: float 3s infinite ease-in-out; }
.finish h2 { font-size:26px; color:var(--purple); }
.finish .summary { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0; }
.finish .summary .chip { background:var(--soft); border-radius:14px; padding:14px 20px; }
.finish .summary .chip b { display:block; font-size:24px; color:var(--purple); }
.finish .summary .chip span { font-size:12px; color:#8a86a6; }

.toast {
  position: fixed; left:50%; top:24px; transform: translateX(-50%);
  background:#2c2a44; color:#fff; padding:10px 20px; border-radius:24px; font-size:14px; z-index:99999;
  opacity:0; transition:.3s; pointer-events:none;
}
.toast.show { opacity:1; top:36px; }