:root{
  --bg:#fdf0f7;--card:#fffafd;--ink:#4a1d3d;--board:#c2268a;--line:#f5cfe4;--soft:#fbe0ef;
  --ok:#27ae60;--bad:#e8505b;--mark:#e0299b;
  --fh:"Baloo 2",system-ui,sans-serif;
  --fb:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:600 clamp(17px,1.1rem + .6vw,22px)/1.55 var(--fb);padding-bottom:env(safe-area-inset-bottom,0px)}

/* ---------- Header ---------- */
header{position:relative;color:#fff;padding:10px 14px 30px;background:linear-gradient(180deg,#e0449f,#a31d78);font-family:var(--fh);font-weight:700}
header::after{content:'🦋 🌸 🌷';position:absolute;right:14px;bottom:3px;font-size:20px;letter-spacing:6px;pointer-events:none;animation:flo 3s ease-in-out infinite}
.top{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.top small{display:block;opacity:.9;font-size:.7em}
#bar{height:8px;background:rgba(255,255,255,.25);border-radius:9px;overflow:hidden;margin-top:8px}
#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff,#ffd6ec);transition:width .4s}
main.container{max-width:820px;margin:0 auto;padding:14px}

/* ---------- Buttons ---------- */
button{font:800 1em var(--fb);cursor:pointer;border:2px solid #fff;border-radius:14px;padding:8px 14px;min-height:46px;margin:3px 2px;background:#c2268a;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .12s}
button:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}
button:active{transform:scale(.93)!important}
button:disabled{opacity:.45;cursor:default}
button:focus-visible{outline:3px solid #ffd54f;outline-offset:2px}
button.alt{background:#fff;color:#7a1458;border-color:#c2268a}
header button{background:rgba(255,255,255,.18);color:#fff;border-color:#fff;padding:6px 12px;min-height:42px}

/* ---------- Card (notebook page) ---------- */
.card{
  display:block;background:var(--card);border:1px solid var(--line);border-left:4px double var(--mark);
  border-radius:20px;
  padding:clamp(14px,3.5vw,28px) clamp(14px,3.5vw,28px) clamp(14px,3.5vw,28px) clamp(20px,4.5vw,34px);
  box-shadow:0 2px 14px rgba(120,20,80,.14);animation:pop .3s;
  background-image:repeating-linear-gradient(transparent 0 31px,var(--line) 31px 32px);
}
h1,h2,h3{font-family:var(--fh);font-weight:800;line-height:1.3;margin:.3em 0;color:var(--ink)}

/* ---------- Unit tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.opt{display:block;width:100%;text-align:left;margin:8px 0;background:#fff;color:#7a1458;border:2px solid #c2268a;font-size:clamp(1.05rem,.95rem + .7vw,1.3rem);padding:14px 16px;line-height:1.35;border-radius:16px;white-space:normal}
.opt:disabled{opacity:1}
.unit{--c:hsl(var(--h) 65% 48%);color:#3a1530!important;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.12);background:linear-gradient(var(--c) 0 10px,transparent 10px),hsl(var(--h) 70% 55%/.14);border-color:var(--c)}
.unit small{font-size:.82em;line-height:1.25;display:inline-block}
.unit .sub{display:block;font-size:.66em;font-weight:700;opacity:.8;margin-top:3px;line-height:1.25}
.progress{background:var(--soft);border:2px solid var(--ink);border-radius:20px;height:20px;overflow:hidden}
.progress div{height:100%;background:var(--board);transition:width .6s}

/* ---------- Animations ---------- */
@keyframes pop{from{transform:translateY(8px);opacity:0}}
@keyframes flo{50%{transform:translateY(-5px)}}
@keyframes bob2{50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes sway{50%{transform:rotate(6deg)}}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes wv{to{background-position:200px 100%,-160px 100%,0 0}}
.rv{opacity:0;transform:translateY(26px) scale(.96);transition:opacity .55s,transform .55s}
.rv.in{opacity:1;transform:none}

/* ---------- Pink garden scenery ---------- */
body{
  background-color:#f7c6e0;
  background-image:
    radial-gradient(circle at 88% 11%,#fffbd0 0 26px,rgba(255,240,200,.55) 27px 60px,transparent 62px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q25 8 50 60 Q75 0 100 60 Q125 10 150 60 Q175 4 200 60Z' fill='%23c2268a' fill-opacity='.35'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#fde4f1 0,#fbd0e7 40%,#f3a6cf 70%,#d9609f 100%);
  background-repeat:no-repeat,repeat-x,no-repeat;
  background-size:100% 100%,200px 60px,100% 100%;
  background-position:0 0,0 70%,0 0;
  background-attachment:fixed;
}
body::before{content:'🌷 🌸';position:fixed;left:8px;bottom:12px;font-size:56px;letter-spacing:6px;z-index:-1;pointer-events:none;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite}
body::after{content:'🌼 🌿 🐞';position:fixed;right:12px;bottom:10px;font-size:26px;letter-spacing:12px;z-index:-1;pointer-events:none}
header{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q12 2 25 20 Q37 4 50 20 Q62 2 75 20 Q87 4 100 20 Q112 2 125 20 Q137 4 150 20 Q162 2 175 20 Q187 4 200 20Z' fill='%23fbcfe6' fill-opacity='.95'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q20 0 40 20 Q60 2 80 20 Q100 0 120 20 Q140 2 160 20Z' fill='%237a1458' fill-opacity='.45'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#e0449f,#a31d78);
  background-repeat:repeat-x,repeat-x,no-repeat;
  background-size:200px 20px,160px 20px,100% 100%;
  background-position:0 100%,0 100%,0 0;
  animation:wv 9s linear infinite;
}

/* ---------- Responsive / accessibility ---------- */
@media(max-width:575.98px){
  .top{justify-content:center!important;text-align:center}
  .top>span{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
  .card{border-radius:16px}
}
@media(min-width:992px){main.container{max-width:900px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}