:root{
      --bg:#f6f9ff;--panel:#ffffff;--primary:#2a6cf7;--ok:#22c55e;--warn:#ef4444;--muted:#94a3b8;
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{margin:0;font-family:System-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans TC,Helvetica,Arial; background:var(--bg); color:#0f172a}
    .app{max-width:1024px;margin:0 auto;padding:12px 12px 24px;}
    header{display:flex;align-items:center;gap:12px;}
    h1{font-size:20px;margin:8px 0 0 0}
    .toolbar{margin-left:auto;display:flex;gap:8px;}
    button{border:0;background:var(--primary);color:#fff;padding:10px 14px;border-radius:14px;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(42,108,247,.2);}    
    button.secondary{background:#e2e8f0;color:#0f172a}
    button:active{transform:translateY(1px)}

    .stage{margin-top:12px;display:grid;grid-template-rows:auto auto;gap:12px}

    /* Drop Zones */
    .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .zone{background:var(--panel);border:3px dashed #cbd5e1;border-radius:18px;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:.15s ease;}
    .zone[data-accept="水果"]{background:linear-gradient(180deg,#fff, #fff7ed)}
    .zone[data-accept="動物"]{background:linear-gradient(180deg,#fff, #ecfeff)}
    .zone[data-accept="交通工具"]{background:linear-gradient(180deg,#fff, #f0f9ff)}
    .zone.active{border-color:var(--primary);box-shadow:0 0 0 4px rgba(42,108,247,.12)}
    .zone.correct{border-color:var(--ok);animation:pulse .8s}
    .zone h2{font-size:18px;margin:8px 0 2px}
    .zone .hint{font-size:14px;color:var(--muted)}

    @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

    /* Stickers rail */
    .rail{background:var(--panel);border:1px solid #e2e8f0;border-radius:18px;padding:10px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:120px}
    .sticker{user-select:none; touch-action:none; font-size:42px; line-height:1; padding:10px 14px; background:#fff; border:2px solid #e2e8f0; border-radius:16px; box-shadow:0 8px 18px rgba(15,23,42,.08);
      cursor:grab; display:flex; align-items:center; justify-content:center; position:relative}
    .sticker:active{cursor:grabbing}
    .sticker.small{font-size:36px}

    .badge{position:absolute;bottom:-8px;right:-8px;background:#0ea5e9;color:#fff;border-radius:999px;padding:2px 8px;font-size:12px;border:2px solid #fff;}

    .footer{display:flex;align-items:center;gap:12px;margin-top:8px;color:#334155}
    .status{font-weight:600}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Confetti */
    .confetti{pointer-events:none;position:fixed;inset:0;overflow:hidden}
    .confetti span{position:absolute;top:-10px;width:10px;height:14px;background:var(--primary);opacity:.9;border-radius:2px;animation:fall linear forwards}
    @keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

    @media (max-width:720px){
      .zone{min-height:140px}
      .sticker{font-size:36px}
    }