:root{
  --ink:#3a2d3f;
  --pink:#ff6f91;
  --accent:#2fbf5b;
  --accent-d:#229447;
  --orange:#ff9f1c;
  --card:#ffffffee;
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);
  --safeL:env(safe-area-inset-left,0px);
  --safeR:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;min-height:100%;
  font-family:"PingFang HK","Varela Round","Nunito","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,#ffe3ef 0%,#fff6d6 45%,#dff6ff 100%);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
body{min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;background:none}
.hidden{display:none!important}
.soft{opacity:.78}
.small{font-size:13px;opacity:.75;margin:0;line-height:1.45}

#bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#bg i{position:absolute;border-radius:50%;opacity:.55;animation:float 14s ease-in-out infinite alternate}
#bg i:nth-child(1){width:34vmin;height:34vmin;left:-8vmin;top:8%;background:#ffd1e3}
#bg i:nth-child(2){width:24vmin;height:24vmin;right:-6vmin;top:22%;background:#c9f0ff;animation-delay:-3s}
#bg i:nth-child(3){width:18vmin;height:18vmin;left:30%;bottom:-6vmin;background:#fff0a8;animation-delay:-6s}
#bg i:nth-child(4){width:12vmin;height:12vmin;right:22%;bottom:12%;background:#d8f5c8;animation-delay:-2s}
#bg i:nth-child(5){width:9vmin;height:9vmin;left:12%;bottom:22%;background:#e7d6ff;animation-delay:-8s}
#bg i:nth-child(6){width:7vmin;height:7vmin;right:8%;top:4%;background:#ffe0c2;animation-delay:-5s}
@keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(3vmin,-4vmin) scale(1.08)}}

.screen{
  position:relative;z-index:1;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--safeT) + 12px) calc(var(--safeR) + 16px) calc(var(--safeB) + 16px) calc(var(--safeL) + 16px);
  text-align:center;gap:10px;
}
.screen h1{margin:0;font-size:clamp(26px,7vmin,44px);font-weight:900;color:#ff4d8d;text-shadow:0 3px 0 #fff}
.screen .sub{margin:0;font-size:clamp(13px,3vmin,18px);font-weight:700;opacity:.75}

.heroArt{width:clamp(72px,18vmin,110px);height:clamp(72px,18vmin,110px);margin-top:4px}
.heroArt svg,.heroArt img{width:100%;height:100%;display:block}

.articleCard{
  width:min(420px,100%);
  background:var(--card);
  border-radius:24px;
  padding:18px 16px 14px;
  box-shadow:0 10px 28px rgba(58,45,63,.12);
  text-align:left;
  max-height:min(52dvh,460px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.articleHead{text-align:center;margin-bottom:10px}
.poemTitle{font-size:clamp(20px,5vmin,28px);font-weight:900;color:#ff4d8d}
.poemAuthor{font-size:13px;font-weight:700;opacity:.65;margin-top:2px}
.articleBody{display:flex;flex-direction:column;gap:6px}
.articleLine{
  font-size:clamp(17px,4.2vmin,22px);font-weight:700;line-height:1.55;
  padding:4px 8px;border-radius:12px;
}
.articleLine:nth-child(odd){background:rgba(255,209,227,.35)}
.articleLine:nth-child(even){background:rgba(201,240,255,.35)}

.pill{
  background:#fff;border-radius:999px;padding:.45em 1em;
  font-size:clamp(13px,2.8vmin,17px);font-weight:800;
  box-shadow:0 3px 0 rgba(58,45,63,.12);min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.pill.softPill{background:rgba(255,255,255,.7);box-shadow:none}
.pill.accent{background:linear-gradient(#6fe08b,#2fbf5b);color:#fff;box-shadow:0 4px 0 var(--accent-d)}
.pill.accent:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-d)}
.pill.ghost{background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(58,45,63,.08)}
.pill.wide{width:100%}
.parentHold{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.65);
  font-size:20px;line-height:1;opacity:.75;position:relative;flex:0 0 auto;
}
.parentHold.holding::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:3px solid var(--pink);animation:hold .7s linear forwards;
}
@keyframes hold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.startParent{position:absolute;top:calc(var(--safeT) + 12px);left:calc(var(--safeL) + 14px)}

.bigBtn{
  margin-top:6px;min-width:min(280px,90%);
  border-radius:999px;padding:.85em 1.4em;
  background:linear-gradient(#6fe08b,#2fbf5b);
  box-shadow:0 8px 0 var(--accent-d),0 14px 26px rgba(47,191,91,.35);
  color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;
  animation:breathe 1.8s ease-in-out infinite;
}
.bigBtn.wide{width:min(320px,92%)}
.bigBtn.small{animation:none}
.bigBtn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--accent-d)}
.btnMain{font-size:clamp(18px,4.5vmin,26px);font-weight:900}
.btnSub{font-size:clamp(11px,2.6vmin,14px);font-weight:700;opacity:.9}
@keyframes breathe{50%{transform:scale(1.03)}}
.hint{margin:4px 0 0;font-size:12px;font-weight:600}

/* Practice layout */
#practiceScreen{gap:8px;align-items:stretch;padding-top:calc(var(--safeT) + 8px)}
#top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.promptBanner{
  flex:0 0 auto;background:rgba(255,255,255,.8);border-radius:18px;
  padding:.55em .9em;font-size:clamp(14px,3.4vmin,18px);font-weight:800;
  box-shadow:0 3px 0 rgba(58,45,63,.08);text-align:center;
}
.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.blankPoem{
  width:min(440px,100%);margin:0 auto;display:flex;flex-direction:column;gap:8px;
  padding:4px 0 12px;
}
.lineCard{
  background:rgba(255,255,255,.88);border-radius:18px;padding:12px 12px;
  text-align:left;box-shadow:0 4px 0 rgba(58,45,63,.08);
  border:3px solid transparent;transition:border-color .2s,transform .15s;
  cursor:pointer;min-height:52px;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 2px;
  font-size:clamp(17px,4.2vmin,22px);font-weight:800;line-height:1.5;
  -webkit-user-select:none;user-select:none;
}
.lineCard:active{transform:scale(.985)}
.lineCard.active{border-color:#ff9f1c;box-shadow:0 0 0 4px rgba(255,159,28,.25),0 4px 0 rgba(58,45,63,.08)}
.lineCard.done{border-color:#52d273;background:#f3fff6}
.lineCard .seg{display:inline}
.blankSlot{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.4em;min-height:1.55em;padding:0 .35em;margin:0 2px;
  border-radius:12px;background:linear-gradient(180deg,#fff,#ffe3ef);
  border:2.5px dashed #ff6f91;color:#ff4d8d;font-weight:900;
  box-shadow:0 2px 0 rgba(255,111,145,.2);
  vertical-align:baseline;cursor:pointer;
}
.blankSlot:active{transform:scale(.96)}
.blankSlot.filled{border-style:solid;background:#fff6d6;color:var(--ink);border-color:#ffd93b}
.blankSlot.revealed{border-style:solid;background:#e8fff0;border-color:#52d273;color:#1f8a45}
.lineMeta{width:100%;font-size:11px;font-weight:700;opacity:.55;margin-top:2px}

.practiceFooter{
  flex:0 0 auto;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding-top:4px;
}

/* Handwriting sheet */
.sheet{
  position:fixed;inset:0;z-index:50;
  background:rgba(58,45,63,.35);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:calc(var(--safeT) + 8px) 12px calc(var(--safeB) + 12px);
}
.sheetCard{
  width:min(440px,100%);background:#fff;border-radius:28px 28px 22px 22px;
  padding:16px 14px 14px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 -8px 40px rgba(58,45,63,.25);max-height:92dvh;
}
.sheetHead h2{margin:0;font-size:22px;font-weight:900;color:#ff4d8d}
.sheetHead p{margin:4px 0 0;font-size:13px;font-weight:700}
.writeTarget{
  font-size:clamp(22px,6vmin,34px);font-weight:900;text-align:center;
  min-height:1.4em;letter-spacing:.06em;
}
.writeTarget .q{color:#ff4d8d}
.writeTarget .ans{color:#1f8a45}
.canvasWrap{
  background:linear-gradient(180deg,#fffef8,#fff6d6);
  border-radius:18px;border:3px solid #ffd1e3;
  overflow:hidden;touch-action:none;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,111,145,.15);
}
#writeCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.sheetActions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* Done */
#doneScreen{justify-content:center}
.bigStar{width:clamp(100px,28vmin,200px);height:clamp(100px,28vmin,200px);animation:starIn 1s cubic-bezier(.3,1.6,.5,1)}
.bigStar svg,.bigStar img{width:100%;height:100%;display:block}
@keyframes starIn{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
.doneSummary{font-size:14px;font-weight:700;max-width:320px}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-6vh;width:12px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--x),112vh) rotate(var(--r))}}

.panel{
  background:#fff;border-radius:28px;padding:18px 20px;max-width:min(440px,92vw);
  max-height:92%;overflow:auto;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 12px 40px rgba(58,45,63,.2);text-align:left;touch-action:pan-y;
}
.panel h2{margin:0;font-size:22px;text-align:center}

@media (prefers-reduced-motion:reduce){
  #bg i,.bigBtn,.bigStar{animation:none}
}

/* Art decorations */
.pensDecor{width:min(360px,94%);margin:2px 0 4px}
.pensRow{display:flex;justify-content:center;align-items:flex-end;gap:clamp(2px,1.2vmin,6px)}
.penArt{width:clamp(28px,7.5vmin,40px);height:clamp(28px,7.5vmin,40px);display:block;flex:0 0 auto}
.pillIcon{width:22px;height:22px;display:block;flex:0 0 auto}
.iconPill,.progressPill{gap:6px}
.sheetTitleRow{display:flex;align-items:center;justify-content:center;gap:8px}
.sheetIcon,.sheetIconWrap{width:36px;height:36px;display:block}
.sheetIconWrap img{width:100%;height:100%;display:block}
.doneBee{width:clamp(64px,16vmin,96px);height:clamp(64px,16vmin,96px);margin-top:-6px}
.doneBee img{width:100%;height:100%;display:block}
.blankSlot.filled .slotThumb,.blankSlot.revealed .slotThumb{
  width:1.15em;height:1.15em;vertical-align:-0.15em;display:inline-block;margin-right:2px
}