/* =========================================================
   Word Pop · 单词拼拼乐 样式表
   手机竖屏优先（375px 起），宽屏居中为手机容器
   ========================================================= */

/* ============ 基础与变量 ============ */
:root{
  --ink:#1d3b32;
  --ink-soft:#4d6b60;
  --paper:#eef6ec;
  --card:#ffffff;
  --green:#176b50;
  --green-dark:#0f503c;
  --gold:#ffc531;
  --gold-deep:#f0991b;
  --shadow:0 6px 18px rgba(29,59,50,.12);
  --font-display:'Fredoka','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-body:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Fredoka',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(rgba(23,107,80,.10) 1.4px,transparent 1.6px);
  background-size:22px 22px;
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
#app{
  position:relative;
  width:100%;
  height:100vh;height:100dvh;
  max-width:480px;
  margin:0 auto;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ============ 顶部栏 ============ */
header{
  display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  flex:none;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;font-size:21px;
  color:var(--green-dark);
  letter-spacing:.3px;
  line-height:1;
}
.logo .pop{color:var(--gold-deep);}
.level-badge{
  margin-left:2px;
  background:var(--green);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;font-size:13px;
  padding:5px 11px;border-radius:999px;
  box-shadow:0 3px 0 var(--green-dark);
  white-space:nowrap;flex:none;
}
.spacer{flex:1;}
.icon-btn{
  width:42px;height:42px;border-radius:12px;
  border:none;background:#fff;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex:none;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 2px 6px rgba(29,59,50,.12);}
.icon-btn svg{width:21px;height:21px;}

/* ============ 目标词卡区（含字母槽） ============ */
#words-panel{
  margin:0 12px 8px;
  background:var(--card);
  border-radius:18px;
  padding:8px 10px;
  box-shadow:var(--shadow);
  display:flex;flex-wrap:wrap;gap:6px;
  align-content:flex-start;
  flex:none;
}
.chip{
  display:flex;align-items:center;gap:6px;
  background:#f3f8f2;
  border:2px solid transparent;
  border-radius:12px;
  padding:5px 8px;
  cursor:pointer;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;
  font-family:inherit;
}
.chip .dot{width:10px;height:10px;border-radius:3px;flex:none;}
.chip .cn{
  font-size:13px;color:var(--ink-soft);font-weight:600;flex:none;
  white-space:nowrap;
}
.chip .speak-btn{
  width:28px;height:28px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;
  background:transparent;border:none;padding:0;
  transition:background .15s;
}
.chip .speak-btn:active{background:rgba(23,107,80,.12);}
.speak-ic{width:16px;height:16px;flex:none;}
.speak-ic .wave{opacity:0;}
.chip .speak-btn.speaking .speak-ic .speaker{fill:var(--gold-deep);stroke:var(--gold-deep);}
.chip .speak-btn.speaking .speak-ic .wave{
  opacity:1;
  animation:speakWave .5s ease-in-out infinite alternate;
}
.chip .speak-btn.speaking .speak-ic .wave:nth-child(3){animation-delay:.15s;}
@keyframes speakWave{
  from{opacity:.25;}
  to{opacity:1;}
}
/* 语言选择 */
.lang-pick{
  display:flex;gap:4px;
  background:#e9f1ec;
  border-radius:14px;
  padding:5px;
  margin:14px auto 0;
  width:fit-content;
  max-width:100%;
}
.lang-pick button{
  border:none;cursor:pointer;
  font-family:var(--font);
  font-size:14px;font-weight:600;
  color:#5b7a70;
  background:transparent;
  padding:8px 15px;border-radius:10px;
  min-height:34px;
  transition:background .18s,color .18s,box-shadow .18s;
}
.lang-pick button.on{
  background:#fff;
  color:var(--green-dark);
  box-shadow:0 2px 6px rgba(23,107,80,.14);
}
.lang-pick button:active{transform:scale(.96);}
.chip .slots{display:flex;gap:3px;}
.slot{
  width:26px;height:26px;border-radius:7px;
  border:2px dashed #c3d6c9;
  background:#f6faf6;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.slot .ghost{
  font-family:var(--font-display);
  font-weight:600;font-size:13px;
  color:var(--gold-deep);
  opacity:0;transition:opacity .2s;
}
.chip.showing .slot .ghost{opacity:.85;}
.chip.active{
  border-color:var(--gold);
  background:#fffaed;
  box-shadow:0 0 0 3px rgba(255,197,49,.28);
}
.chip.done{
  background:#e8f6ee;
  border-color:#9ed6b4;
}
.done-text{
  display:none;
  font-family:var(--font-display);
  font-weight:600;font-size:14px;
  color:var(--green);
  letter-spacing:.5px;
}
.done-text .check{margin-left:4px;font-weight:700;}
.chip.done .slots{display:none;}
.chip.done .cn{color:var(--green-dark);}
.chip.done .done-text{display:inline;}
.chip.completing{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,197,49,.4);}
.chip.error{animation:chipError .5s ease 2;}
@keyframes chipError{
  0%,100%{border-color:transparent;box-shadow:none;}
  50%{border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.22);}
}

/* ============ 游戏区 ============ */
#board-wrap{
  flex:1;min-height:0;
  margin:0 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;
}
#board{
  position:relative;
  flex:1;
  border-radius:22px;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 2px 10px rgba(29,59,50,.06);
  overflow:hidden;
}
#board::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(23,107,80,.07) 1.3px,transparent 1.5px);
  background-size:20px 20px;
  pointer-events:none;
}

/* ============ 飞行层（覆盖整个 app） ============ */
#flight-layer{
  position:absolute;inset:0;
  z-index:1200;
  pointer-events:none;
  overflow:visible;
}

/* ============ 字母积木 ============ */
.tile{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  color:#fff;
  border-radius:19%;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  will-change:transform;
  background:var(--c);
  background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%);
  box-shadow:0 4px 0 var(--cd),0 7px 10px rgba(29,59,50,.22),inset 0 2px 3px rgba(255,255,255,.55);
  transition:transform .15s ease;
}
.tile span{text-shadow:0 2px 0 rgba(0,0,0,.16);pointer-events:none;}
.tile:active{transform:translate(var(--tx),var(--ty)) scale(.92);}
.tile.dragging{
  transition:none;
  z-index:60;
  cursor:grabbing;
  box-shadow:0 12px 20px rgba(29,59,50,.32),inset 0 2px 3px rgba(255,255,255,.55);
}
.tile.flying{
  transition:none;
  cursor:default;
  border-radius:19%;
}
.tile.in-slot{
  position:absolute;inset:0;
  width:100%;height:100%;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 2px 0 var(--cd),inset 0 1px 2px rgba(255,255,255,.5);
}
.tile.in-slot span{font-size:14px;}
.tile.hint{animation:tileHint .55s ease-in-out infinite;}
@keyframes tileHint{
  0%,100%{box-shadow:0 4px 0 var(--cd),0 7px 10px rgba(29,59,50,.22),inset 0 2px 3px rgba(255,255,255,.55);}
  50%{box-shadow:0 0 0 5px rgba(255,197,49,.95),0 4px 0 var(--cd);}
}
.tile.shake{animation:shake .4s ease;}
@keyframes shake{
  0%,100%{transform:translate(var(--tx),var(--ty)) rotate(0);}
  20%{transform:translate(calc(var(--tx) - 6px),var(--ty)) rotate(-4deg);}
  40%{transform:translate(calc(var(--tx) + 6px),var(--ty)) rotate(4deg);}
  60%{transform:translate(calc(var(--tx) - 4px),var(--ty)) rotate(-2deg);}
  80%{transform:translate(calc(var(--tx) + 4px),var(--ty)) rotate(2deg);}
}
.tile.glow-slot{
  animation:glowSlot .42s ease-in-out infinite alternate;
}
@keyframes glowSlot{
  from{box-shadow:0 0 0 0 rgba(255,197,49,.95),0 0 12px 4px rgba(255,197,49,.75),0 2px 0 var(--cd);}
  to{box-shadow:0 0 0 5px rgba(255,197,49,.5),0 0 22px 9px rgba(255,210,80,.95),0 2px 0 var(--cd);}
}
.tile.pop{animation:popOut .3s cubic-bezier(.5,0,.75,0) forwards;}
@keyframes popOut{
  to{transform:scale(0);opacity:0;}
}
.spark{
  position:absolute;border-radius:50%;
  pointer-events:none;z-index:1300;
  will-change:transform,opacity;
}

/* ============ 遮罩面板（开始/过关） ============ */
.overlay{
  position:absolute;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(238,246,236,.82);
  backdrop-filter:blur(3px);
}
.overlay.hidden{display:none;}
.panel{
  width:100%;max-width:360px;
  background:var(--card);
  border-radius:26px;
  padding:28px 24px 24px;
  box-shadow:0 18px 50px rgba(29,59,50,.2);
  text-align:center;
}
.title-blocks{
  display:flex;justify-content:center;gap:5px;
  margin-bottom:6px;
}
.title-blocks b{
  font-family:var(--font-display);
  font-weight:700;font-size:26px;
  color:#fff;
  width:40px;height:46px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 var(--cd),inset 0 2px 2px rgba(255,255,255,.5);
  animation:bob 2.2s ease-in-out infinite;
}
.title-blocks b:nth-child(2){animation-delay:.15s;}
.title-blocks b:nth-child(3){animation-delay:.3s;}
.title-blocks b:nth-child(4){animation-delay:.45s;}
.title-blocks b:nth-child(5){animation-delay:.6s;}
.title-blocks b:nth-child(6){animation-delay:.75s;}
.title-blocks b:nth-child(7){animation-delay:.9s;}
.title-blocks b:nth-child(8){animation-delay:1.05s;}
@keyframes bob{0%,100%{transform:translateY(3px);}50%{transform:translateY(-5px);}}
.panel h2{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;
  color:var(--green-dark);
  margin:10px 0 4px;
}
.panel .sub{color:var(--ink-soft);font-size:14px;line-height:1.6;}
.howto{
  margin:16px 0 20px;
  text-align:left;
  display:flex;flex-direction:column;gap:9px;
}
.howto div{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;color:var(--ink);
  background:#f3f8f2;border-radius:12px;
  padding:9px 12px;
}
.howto .n{
  flex:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--green);color:#fff;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.btn{
  display:block;width:100%;
  border:none;cursor:pointer;
  border-radius:16px;
  padding:14px;
  font-family:var(--font-display);
  font-size:18px;font-weight:600;
  letter-spacing:.5px;
  transition:transform .12s;
}
.btn:active{transform:translateY(3px);}
.btn-primary{
  background:var(--gold-deep);
  color:#fff;
  box-shadow:0 5px 0 #c47a0e;
}
.btn-primary:active{box-shadow:0 2px 0 #c47a0e;}
.btn-secondary{
  background:#eef3ef;
  color:var(--green-dark);
  box-shadow:0 5px 0 #cfdcd4;
  margin-top:10px;
}
.btn-secondary:active{box-shadow:0 2px 0 #cfdcd4;}
.words-clear-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin:16px 0 18px;
}
.words-clear-list span{
  font-family:var(--font-display);
  font-weight:600;font-size:14px;
  background:#e8f6ee;color:var(--green-dark);
  border-radius:9px;padding:5px 10px;
}
.stars{font-size:30px;letter-spacing:6px;margin-bottom:4px;color:var(--gold);}

/* ============ 庆祝画布 ============ */
#confetti{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;z-index:1500;
}
.toast{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:rgba(29,59,50,.92);color:#fff;
  font-size:13px;padding:9px 16px;border-radius:999px;
  opacity:0;transition:opacity .25s,transform .25s;
  z-index:1600;pointer-events:none;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============ 宽屏：手机容器居中 ============ */
@media (min-width:520px){
  body{background:#dfe9dd;}
  #app{background:var(--paper);
    background-image:radial-gradient(rgba(23,107,80,.10) 1.4px,transparent 1.6px);
    background-size:22px 22px;
    box-shadow:0 0 40px rgba(29,59,50,.14);}
}
@media (prefers-reduced-motion:reduce){
  .title-blocks b{animation:none;}
  .tile{transition:none;}
}