*{box-sizing:border-box}
:root{
  --blue:#dfefff;      /* zartblau */
  --beige:#f7f3ea;     /* ruhiges beige */
  --ink:#1f3a4a;       /* ruhiger Tintenfarbton */
  --mint:#9fd3c7;      /* gedecktes Mint für Akzente */
  --green:#2e8b57;     /* Praxisgrün für Linien */
}
html,body{height:100%}
body{
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,var(--blue),var(--beige));
  color: var(--ink); margin:0; text-align:center
}
header{ display:flex; align-items:center; gap:16px; padding:10px 12px; background:rgba(255,255,255,.4); backdrop-filter:blur(4px)}
.logo{ width:90px }
h1{ margin:0; font-size:1.4rem }
.spacer{flex:1}
.ghost{ background:transparent; border:2px solid var(--ink); color:var(--ink); border-radius:12px; padding:8px 12px; cursor:pointer }
.ghost[aria-pressed="true"]{ background:var(--ink); color:white }
main{ max-width:1000px; margin:0 auto; padding:10px }
.card{
  background:#ffffffcc; 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}
label{ font-weight:700 }
select, button{
  padding:10px 14px; border-radius:12px; border:2px solid var(--ink); font-size:1rem
}
button{ background:#ffffff; color:var(--ink); cursor:pointer; transition:transform .12s }
button:hover{ transform:scale(1.03) }
.hint{ opacity:.7; font-size:.95rem; margin:.5rem 0 0 }

#wully-box{ max-width:420px; margin:10px auto }
#wully{ width:140px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.08)); animation:float 4s ease-in-out infinite }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

#canvasWrap{ position:relative; display:inline-block }
#graffiti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#dice-box img{ width:280px; border-radius:20px; box-shadow:0 0 18px rgba(0,0,0,.08); background:#fff }

#buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px }
#buttons button{ min-width:56px; font-size:1.05rem }

#feedback{ font-size:1.15rem; min-height:28px; margin:8px 0; opacity:.9 }
#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,var(--mint),var(--blue)) }

footer{ margin:20px 0; color:#556 }

/* Reduced-motion preference respected */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}


.tabs{ display:flex; gap:8px; justify-content:center; margin:6px auto 0; padding:6px }
.tab{ border:2px solid var(--ink); background:#ffffffb3; color:var(--ink); padding:8px 12px; border-radius:12px; cursor:pointer }
.tab.active{ background:var(--ink); color:white }
#dice-box{ display:flex; align-items:center; justify-content:center }
#dice2{ width:280px; border-radius:20px; box-shadow:0 0 18px rgba(0,0,0,.08); background:#fff }
.decomp{ font-weight:800; margin-top:12px; opacity:.95; font-size:1.6rem }