:root{--brand:#2ecc71;--brand2:#27ae60;--bg:#f6fff9;--card:#fff;--muted:#5b6c68}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:#123;display:flex;align-items:center;justify-content:center;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif}
.app{width:min(1100px,96vw);padding:20px}
.header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.header img{height:72px;border-radius:18px}
.header h1{margin:0;font-size:clamp(22px,4vw,34px)}
.header .sub{color:var(--muted);margin:4px 0 0 0}
.card{background:var(--card);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:16px}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:0 12px 8px}
.left,.right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
select,button,input[type=number]{border:none;outline:none;padding:10px 14px;border-radius:12px;background:#fff}
button{background:var(--brand);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 6px 14px rgba(46,204,113,.25)}
button.secondary{background:#fff;color:#123;border:2px solid var(--brand);box-shadow:none}
button.big{font-size:clamp(20px,4vw,28px);padding:16px 24px;border-radius:16px}
.grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px}
.task{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(24px,6vw,56px);font-weight:900;padding:12px;border-radius:16px;background:#fafffb}
.answer{display:flex;align-items:center;gap:8px;justify-content:center}
.answer input{font-size:clamp(22px,4vw,32px);width:140px;text-align:center;border:2px solid #e4f6eb;border-radius:12px}
.row{display:flex;justify-content:center;gap:12px;padding:8px}
.stat{background:#fff;border:1px solid #e6f5ec;padding:8px 12px;border-radius:12px;font-weight:700}
.hint{color:var(--muted);text-align:center}
.footer{padding:8px 16px;color:var(--muted);font-size:14px;text-align:center}
.toast{position:fixed;right:16px;bottom:16px;background:#111;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateY(0)}
.confetti{position:fixed;inset:0;pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:8px;background:#eafff2;color:#0f5132;padding:8px 12px;border-radius:12px;font-weight:800;border:1px solid #c3f4d5}
.stars{font-size:20px}
.solved{background:#ecfff3}

/* Columnar points */
.points{
  display:grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(32px, 1fr));
  gap:12px;
  padding:12px;
  justify-items:center;
  align-items:start;
}
.col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.dot{
  width:18px; height:18px; border-radius:50%;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.group-label{ grid-column:1/-1; text-align:center; color:#587; font-size:14px; padding-top:6px }
.legend{ text-align:center; color:#587; font-size:14px }