:root{
  --green:#4CAF50;
  --light:#e9f7ec;
  --fresh:#b5e7b0;
  --dark:#2e7d32;
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(135deg,#d7ffd9,#f0fff4); color:#222; font-family: 'Trebuchet MS', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:var(--fresh); padding:10px 16px; border-bottom:4px solid var(--green);
}
header img.logo{ position:absolute; left:16px; height:60px; width:auto; object-fit:contain }
h1.title{
  margin:0;
  font-size: clamp(22px, 4vw, 34px);
  color: var(--dark);
  letter-spacing:1px;
  text-shadow: 2px 2px 0 #a5d6a7, -2px -2px 0 #a5d6a7, 0 0 6px #8de09a;
}
main{ max-width: 980px; margin: 20px auto; padding: 12px 16px }
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin: 8px 0 16px;
}
.button, button{
  border:none; border-radius:16px; padding:10px 16px; background:var(--green); color:white; font-weight:600; cursor:pointer; box-shadow: 0 6px 12px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.button:hover, button:hover{ transform: translateY(-1px); box-shadow:0 10px 16px rgba(0,0,0,.14); background:#43a047 }
.card{
  background:white; border-radius:18px; padding:16px; box-shadow:0 6px 16px rgba(0,0,0,.08); border:1px solid #e6f5e6;
}
.grid{ display:grid; gap:12px }
footer{
  margin-top:32px; background:var(--fresh); border-top:4px solid var(--green); padding:14px; text-align:center; color:var(--dark); font-size:14px;
}
.graffiti{ 
  font-weight:900; letter-spacing:1.5px; text-transform:uppercase; 
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #7ee787, 0 0 16px #7ee787;
}
/* Ten-frame */
.tenframe{ width:min(520px, 92vw); margin:16px auto; display:grid; grid-template-columns: repeat(5,1fr); gap:8px; }
.cell{
  aspect-ratio:1; border-radius:14px; border:3px solid #a5d6a7; display:flex; align-items:center; justify-content:center; background: #f9fff9;
  position:relative;
}
.cell.magic5{ outline:3px dashed #fbc02d; box-shadow: inset 0 0 0 4px #fff59d }
.token{
  width: clamp(40px, 10vw, 64px); height: clamp(40px, 10vw, 64px);
  border-radius:50%; background: radial-gradient(circle at 30% 30%, #81c784 0%, #43a047 60%, #2e7d32 100%);
  display:flex; align-items:center; justify-content:center; color:white; font-weight:800; cursor:grab; user-select:none;
  border:3px solid rgba(255,255,255,.8); box-shadow:0 6px 10px rgba(0,0,0,.18);
}
.token:active{ cursor:grabbing }
.tray{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px auto; }
.info{ text-align:center; font-size:18px; color:#00695c; margin:4px 0 }
.feedback{ text-align:center; font-size:20px; margin-top:8px; min-height:28px }
hr.sep{ border:none; border-top:2px dashed #cdeccc; margin:18px 0 }
.small{ font-size:14px; opacity:.85 }
/* Dice */
.dice-wrap{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin: 16px 0 }
.die{
  width:min(140px, 40vw); aspect-ratio:1; background:white; border-radius:20px; border:4px solid #e0e0e0; box-shadow:0 6px 12px rgba(0,0,0,.1);
  display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding:12px;
}
.pip{ width:18px; height:18px; border-radius:50%; background:#222; justify-self:center; align-self:center }
.option-row{ display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap }
.option{ padding:10px 14px; border-radius:14px; border:2px solid #a5d6a7; background:#fff; cursor:pointer; font-weight:700 }
.option:hover{ background:#f0fff4 }
.correct{ background:#c8e6c9 !important; border-color:#66bb6a !important }
.wrong{ background:#ffcdd2 !important; border-color:#ef5350 !important }


.controls{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin-bottom:10px;
}
.controls input[type="text"]{
  padding:10px 12px; border:2px solid #a5d6a7; border-radius:12px; min-width:260px;
}
.controls label{ font-size:14px; color:#1b5e20 }
.controls select{ padding:8px 10px; border:2px solid #a5d6a7; border-radius:12px; background:#fff }
.frames-wrap{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.note{ font-size:13px; opacity:.8; text-align:center; margin-top:6px }


:root{
  --cell: 64px;
  --gap: 8px;
  --token: calc(var(--cell) - 8px);
}
.tenframe{ 
  display:grid; 
  grid-template-columns: repeat(5, var(--cell)); 
  gap: var(--gap); 
  padding: 6px; 
  background:#f6fff6; 
  border-radius:16px; 
  border:1px solid #e0f5e0;
  margin: 8px;
}
.frames-wrap{ 
  display:grid; 
  gap: 12px; 
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--cell)*5 + var(--gap)*4 + 20px), 1fr));
}
.cell{
  width: var(--cell);
  height: var(--cell);
}
.token{ 
  width: var(--token); 
  height: var(--token);
}
.sizebar{
  display:flex; gap:12px; justify-content:center; align-items:center; margin:8px 0 14px;
}
.sizebar input[type="range"]{ width:min(480px, 90vw); }
.touchtoggle{ display:flex; gap:8px; justify-content:center; align-items:center; margin:6px 0; }


/* High-contrast numbers for Würfelpunkte options */
.option{
  color: #000 !important;
  font-weight: 800;
  font-size: 18px;
}
.option.correct, .option.wrong{
  color: #000 !important;
}