:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-2: #273449;
  --line: #334155;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --pink: #f472b6;
  --radius: 18px;
  font-size: 17px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh;
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.1rem; }
p { line-height: 1.55; }
button {
  font: inherit; font-weight: 700; color: #0f172a; background: var(--accent);
  border: 0; border-radius: 14px; padding: .8em 1.4em; cursor: pointer;
  box-shadow: 0 4px 14px rgba(56, 189, 248, .25); transition: transform .08s, box-shadow .2s;
  min-height: 48px;
}
button:hover { box-shadow: 0 6px 20px rgba(56, 189, 248, .45); }
button:active { transform: scale(.96); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button.secondary { background: var(--panel-2); color: var(--text); box-shadow: none; }
button.good { background: var(--good); box-shadow: 0 4px 14px rgba(74, 222, 128, .3); }
button.pink { background: var(--pink); box-shadow: 0 4px 14px rgba(244, 114, 182, .3); }
button.small { padding: .45em .9em; min-height: 36px; font-size: .9rem; border-radius: 10px; }
input[type=text], input[type=number], select, textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 2px solid var(--line);
  border-radius: 12px; padding: .6em .8em; outline: none; min-height: 48px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 20px 16px 60px; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.muted { color: var(--muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.hidden { display: none !important; }
.center { text-align: center; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }

/* ---------- play page ---------- */
.play-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .play-grid { grid-template-columns: 1fr; } }
.progress-label { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.bar { height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--good)); transition: width .4s ease; }
.story { font-size: 1.15rem; line-height: 1.6; }
.story.fr { font-style: normal; }
.question { font-size: 1.35rem; line-height: 1.5; margin: 14px 0; }
.plain-toggle { font-size: .85rem; color: var(--muted); cursor: pointer; text-decoration: underline; background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; font-weight: 400; }
.answer-area { margin: 18px 0; }
.answer-area input[type=text] { font-size: 1.5rem; width: 200px; text-align: center; }
.choices { display: grid; gap: 10px; }
.choice {
  display: block; background: var(--panel-2); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px;
  font-size: 1.15rem; cursor: pointer; transition: all .15s; min-height: 52px;
}
.choice:hover { border-color: var(--accent); transform: translateX(4px); }
.choice.selected { border-color: var(--accent); background: #1d3a4d; }
.feedback { min-height: 2em; margin-top: 14px; font-size: 1.15rem; line-height: 1.5; }
.feedback .ok { color: var(--good); font-weight: 700; }
.feedback .nope { color: var(--warn); font-weight: 700; }
.hint-box { background: rgba(251, 191, 36, .1); border-left: 4px solid var(--warn); border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.explain-box { background: rgba(56, 189, 248, .1); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-top: 10px; font-size: 1rem; }

/* vertical layout of a column operation */
.vertical { display: inline-grid; font-family: 'Consolas', 'Courier New', monospace; font-size: 2.2rem; line-height: 1.15; margin: 8px 0 4px 8px; text-align: right; }
.vertical .r { display: grid; grid-auto-flow: column; }
.vertical .c { width: 1.1em; text-align: center; position: relative; }
.vertical .op { width: 1.1em; color: var(--muted); }
.vertical .line { border-top: 3px solid var(--text); margin-top: 2px; }
.vertical .c .mark { position: absolute; top: -1em; left: 0; right: 0; font-size: .5em; color: var(--pink); }
.vertical .c.struck::after { content: ''; position: absolute; left: 15%; right: 15%; top: 48%; border-top: 3px solid var(--bad); transform: rotate(-20deg); }
.vertical input { width: 1.05em; font: inherit; text-align: center; background: var(--bg); color: var(--good); border: 2px solid var(--line); border-radius: 6px; padding: 0; min-height: 0; height: 1.2em; }

.media-panel { background: var(--panel); border-radius: var(--radius); border: 3px dashed var(--line); padding: 16px; text-align: center; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: border-color .3s; }
.media-panel.lit { border-color: var(--good); }
.media-panel img, .media-panel video { max-width: 100%; max-height: 320px; border-radius: 14px; box-shadow: 0 8px 25px rgba(0,0,0,.5); }
.media-panel h3 { color: var(--good); margin: 0; }
.scratch { margin-top: 14px; }
.scratch canvas { width: 100%; height: 220px; background: #fff; border-radius: 12px; touch-action: none; cursor: crosshair; }
.scratch .tools { display: flex; gap: 8px; margin-top: 6px; }

.anim-glow { animation: glowPulse .8s ease-out; }
.anim-bounce { animation: bounce .6s ease-out; }
.anim-wiggle { animation: wiggle .6s ease-in-out; }
.anim-pop { animation: pop .5s ease-out; }
@keyframes glowPulse { 0% { box-shadow: 0 0 0 rgba(74,222,128,0); } 50% { box-shadow: 0 0 45px rgba(74,222,128,.9); } 100% { box-shadow: 0 0 0 rgba(74,222,128,0); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-14px); } 60% { transform: translateY(4px); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

.confetti { position: fixed; top: -12px; width: 10px; height: 16px; border-radius: 3px; pointer-events: none; animation: fall linear forwards; z-index: 50; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .8; } }

/* summary */
.bubbles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0; }
.bubble { background: var(--bg); border-radius: 12px; padding: 10px 14px; min-width: 56px; text-align: center; cursor: pointer; border: 2px solid transparent; }
.bubble:hover { border-color: var(--accent); }
.bubble .q { font-size: .8rem; color: var(--muted); font-weight: 700; }
.bubble .a { font-size: 1.4rem; font-weight: 900; }
.bubble .a.perfect { color: var(--good); } .bubble .a.good { color: var(--warn); } .bubble .a.struggle { color: var(--bad); }
.stat { background: linear-gradient(135deg, var(--pink), #c026d3); color: white; padding: 10px 22px; border-radius: 30px; display: inline-block; font-weight: 700; font-size: 1.1rem; margin: 6px; }
.skill-progress { display: grid; gap: 8px; margin: 14px 0; text-align: left; }
.skill-progress .sp { display: grid; grid-template-columns: 1fr 160px 60px; gap: 10px; align-items: center; }
.skill-progress .track { height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.skill-progress .track > div { height: 100%; background: var(--good); }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal .box { background: var(--panel); border-radius: var(--radius); padding: 24px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; border: 1px solid var(--line); }

/* ---------- lesson: blocks ---------- */
.blocks-lab { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: start; }
@media (max-width: 760px) { .blocks-lab { grid-template-columns: 1fr; } }
.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.col { background: var(--bg); border-radius: 12px; padding: 10px; min-height: 180px; border: 2px solid var(--line); }
.col.flash { border-color: var(--warn); animation: pop .5s; }
.col h4 { margin: 0 0 8px; text-align: center; color: var(--muted); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.col .count { text-align: center; font-size: 1.6rem; font-weight: 900; margin-bottom: 6px; }
.pieces { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: flex-start; }
.hundred { width: 48px; height: 48px; background: repeating-linear-gradient(0deg, #38bdf8 0 3.4px, #0ea5e9 3.4px 4.8px), repeating-linear-gradient(90deg, transparent 0 3.4px, rgba(0,0,0,.25) 3.4px 4.8px); border-radius: 4px; cursor: pointer; transition: transform .15s; }
.ten { width: 18px; height: 48px; background: repeating-linear-gradient(0deg, #4ade80 0 3.4px, #16a34a 3.4px 4.8px); border-radius: 3px; cursor: pointer; transition: transform .15s; }
.one { width: 16px; height: 16px; background: #f472b6; border-radius: 3px; cursor: pointer; transition: transform .15s; }
.hundred:hover, .ten:hover { transform: scale(1.1); }
/* larger hit area for fingers without changing the look */
.piece { position: relative; }
.piece::before { content: ''; position: absolute; inset: -4px; }
.piece.taken { opacity: .18; }
.piece.gone { animation: shrink .4s forwards; }
@keyframes shrink { to { transform: scale(0); opacity: 0; } }
.lesson-msg { background: var(--panel-2); border-radius: 12px; padding: 12px 16px; font-size: 1.1rem; line-height: 1.5; min-height: 3.4em; }
.lesson-msg .dad { color: var(--warn); font-size: .95rem; display: block; margin-top: 6px; }