*{box-sizing:border-box}
:root{
  --blue:#dfefff;
  --beige:#f7f3ea;
  --ink:#1f3a4a;
  --green:#2e8b57;
}
body{ margin:0; font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,var(--blue),var(--beige)); color:var(--ink); text-align:center}
header{ display:flex; align-items:center; gap:12px; justify-content:center; padding:10px 12px; background:#ffffff88; backdrop-filter: blur(4px)}
.logo{ width:90px }
h1{ margin:0; font-size:1.4rem }
main{ max-width:1100px; margin:0 auto; padding:10px }
.card{ background:#fff; border-radius:18px; padding:16px; margin:10px; box-shadow:0 8px 24px rgba(0,0,0,.08) }
.row{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap}
select,button{ padding:10px 14px; border-radius:12px; border:2px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer }
button:hover{ transform: scale(1.03) }
.hint{ opacity:.75; margin:.35rem 0 0 }

.board{ display:flex; gap:14px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin:10px auto; }
.die{ position:relative; padding:8px; border-radius:14px; background:#ffffffcc; box-shadow:0 6px 16px rgba(0,0,0,.08); cursor:pointer; transition: transform .12s, box-shadow .12s }
.die:hover{ transform: translateY(-2px) }
.die img{ width:220px; display:block }
.die .val{ position:absolute; right:10px; top:8px; font-weight:800; background:#00000010; padding:2px 8px; border-radius:10px; font-size:.95rem }

.task{ font-size:1.2rem; margin:.2rem 0 .6rem }
.feedback{ font-size:1.1rem; min-height:28px; margin:.2rem 0 }
.explain{ font-weight:800; font-size:1.6rem; margin:.4rem 0 .2rem; opacity:.95 }

#progress{ height:12px; background:#eaeff2; border-radius:10px; overflow:hidden; margin:10px auto; max-width:520px; border:1px solid #d0d7de }
#bar{ height:100%; width:0; background:linear-gradient(90deg,#9fd3c7,var(--blue)) }