:root {
  --ink: #3b2f4a;
  --cream: #fff8ec;
  --pink: #ff8fb1;
  --sky: #8fd3ff;
  --mint: #7fdcb0;
  --sun: #ffd166;
  --violet: #b69cff;
  --orange: #ffb069;
  --shadow: 0 10px 0 rgba(59, 47, 74, .18);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #2d2340;
  font-family: "Nunito", "Trebuchet MS", "Verdana", "DejaVu Sans", system-ui, sans-serif;
  color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
/* The whole game is laid out on a 1280×800 stage scaled to fit the screen. */
#stage { position: relative; width: 1280px; height: 800px; flex: none; overflow: hidden; border-radius: 0;
  background: linear-gradient(#bfe8ff, #e9f7ff 55%, #fff4e0); transform-origin: center center; }
#screen { position: absolute; inset: 0; }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }

/* Top bar */
#topbar { position: absolute; top: 14px; left: 14px; right: 14px; height: 84px; display: flex; gap: 14px; align-items: center; z-index: 40; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.tb-btn { width: 84px; height: 84px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .15s; }
.tb-btn:hover { transform: scale(1.06); }
.tb-btn:active { transform: scale(.94) translateY(4px); box-shadow: 0 5px 0 rgba(59, 47, 74, .18); }
.tb-btn svg { width: 56px; height: 56px; }
#btn-home { margin-right: auto; }
#btn-home.hidden { visibility: hidden; }
.tb-stars { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 26px; height: 70px; padding: 0 22px; box-shadow: var(--shadow); font-size: 34px; font-weight: 800; }
.tb-stars svg { width: 44px; height: 44px; }

/* Generic big pieces */
.title { position: absolute; left: 0; right: 0; text-align: center; font-weight: 900; color: var(--ink); text-shadow: 0 4px 0 #fff; }
.big-card { position: absolute; border-radius: 40px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.big-card:hover { transform: scale(1.06) rotate(-1deg); }
.big-card:active, .big-card.pressed { transform: scale(.95); }
.big-card .label { font-size: 30px; font-weight: 900; text-align: center; line-height: 1.1; padding: 0 12px; }
.big-card svg { display: block; }

.arrow-next { position: absolute; right: 36px; bottom: 36px; width: 150px; height: 150px; border-radius: 50%; background: var(--mint); box-shadow: var(--shadow); display: grid; place-items: center; z-index: 30; animation: pulse 1.3s ease-in-out infinite; }
.arrow-next svg { width: 96px; height: 96px; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.speaker { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: var(--sun); box-shadow: var(--shadow); display: grid; place-items: center; z-index: 20; }
.speaker svg { width: 60px; height: 60px; }
.speaker.small { width: 70px; height: 70px; }
.speaker.small svg { width: 42px; height: 42px; }
.speaker.playing { animation: wiggle .5s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.shake { animation: shake .45s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-16px); } 40% { transform: translateX(14px); } 60% { transform: translateX(-10px); } 80% { transform: translateX(6px); } }
.bounce-in { animation: bounceIn .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes bounceIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hint-glow { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 0 #ffd166); } 50% { filter: drop-shadow(0 0 22px #ffb000); } }

/* Scene helpers */
.scene { position: absolute; inset: 0; }
.scene svg.full { position: absolute; inset: 0; width: 100%; height: 100%; }
.hit { cursor: pointer; transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.hit:hover { transform: scale(1.05); }
.hit.pop { animation: popAnim .5s; }
@keyframes popAnim { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Confetti */
.confetti { position: absolute; width: 38px; height: 38px; }
.confetti svg { width: 100%; height: 100%; }
.burst-star { position: absolute; left: 50%; top: 45%; width: 260px; height: 260px; margin: -130px 0 0 -130px; animation: starBurst 1.6s ease-out forwards; }
@keyframes starBurst { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 30% { transform: scale(1.15) rotate(10deg); opacity: 1; } 70% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(.4) translate(1300px, -900px); opacity: 0; } }

/* Start screen */
.start-play { position: absolute; left: 50%; top: 540px; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: var(--pink); box-shadow: 0 14px 0 #d9678c; display: grid; place-items: center; animation: pulse 1.4s ease-in-out infinite; }
.start-play svg { width: 150px; height: 150px; }

/* Choice cards in lessons */
.choice { position: absolute; border-radius: 36px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s; }
.choice:hover { transform: scale(1.05); }
.choice.right { background: #d7ffe9; box-shadow: 0 10px 0 #58c48e; }
.choice .ctext { font-size: 34px; font-weight: 900; margin-top: 6px; text-align: center; line-height: 1.1; }
.choice .arabic { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 64px; direction: rtl; }
.choice .ear { position: absolute; top: -26px; right: -26px; width: 72px; height: 72px; border-radius: 50%; background: var(--sun); box-shadow: 0 6px 0 rgba(59, 47, 74, .18); display: grid; place-items: center; }
.choice .ear svg { width: 44px; height: 44px; }

/* Lesson map */
.lesson-dot { position: absolute; width: 190px; height: 190px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .18s; }
.lesson-dot:hover { transform: scale(1.07); }
.lesson-dot svg.icon { width: 130px; height: 130px; }
.lesson-dot .num { position: absolute; top: -8px; left: -8px; width: 60px; height: 60px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 34px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(59, 47, 74, .2); }
.lesson-dot .done { position: absolute; bottom: -10px; right: -10px; width: 70px; height: 70px; }
.lesson-title { position: absolute; left: 0; right: 0; top: 104px; text-align: center; font-size: 46px; font-weight: 900; text-shadow: 0 4px 0 #fff; }

/* Coloring */
.col-tabs { position: absolute; left: 40px; right: 40px; top: 130px; display: flex; gap: 18px; justify-content: center; }
.col-tab { width: 220px; height: 150px; border-radius: 34px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s; }
.col-tab:hover { transform: scale(1.05); }
.col-tab svg { width: 96px; height: 80px; }
.col-tab .label { font-size: 22px; font-weight: 900; text-align: center; line-height: 1.05; padding: 0 8px; }
.col-tab.active { background: #fff3c4; box-shadow: 0 10px 0 #e0b640; }
.col-grid { position: absolute; left: 40px; right: 40px; top: 310px; bottom: 30px; display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-content: flex-start; }
.col-thumb { position: relative; width: 210px; height: 210px; border-radius: 30px; background: #fff; box-shadow: var(--shadow); padding: 12px; transition: transform .18s; }
.col-thumb:hover { transform: scale(1.06) rotate(1deg); }
.col-thumb svg.pic { width: 100%; height: 100%; }
.col-thumb .done { position: absolute; right: -12px; top: -12px; width: 64px; height: 64px; }

.paint-wrap { position: absolute; left: 250px; top: 110px; width: 690px; height: 670px; background: #fff; border-radius: 40px; box-shadow: var(--shadow); padding: 16px; }
.paint-wrap svg { width: 100%; height: 100%; display: block; }
.pic .r { stroke: #3b2f4a; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.pic .d { fill: none; stroke: #3b2f4a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pic .k { fill: #3b2f4a; stroke: none; pointer-events: none; }
.paint-wrap .r { cursor: pointer; }
.palette { position: absolute; left: 30px; top: 110px; width: 200px; height: 670px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.paint-color { width: 80px; height: 80px; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 7px 0 rgba(59, 47, 74, .22); transition: transform .15s; }
.paint-color.sel { transform: scale(1.18); border-color: var(--ink); }
.tools { position: absolute; right: 30px; top: 110px; width: 300px; height: 670px; display: flex; flex-direction: column; gap: 22px; justify-content: center; align-items: center; }
.tool { width: 150px; height: 130px; border-radius: 34px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .15s; }
.tool:hover { transform: scale(1.06); }
.tool:active { transform: scale(.94); }
.tool svg { width: 84px; height: 84px; }
.cur-color { width: 150px; height: 60px; border-radius: 30px; border: 6px solid #fff; box-shadow: var(--shadow); }

.spin { animation: spin 24s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.flap { animation: flap .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.7); } }
.bubble { position: absolute; background: #fff; border-radius: 40px; box-shadow: var(--shadow); padding: 18px 30px; text-align: center; font-size: 34px; font-weight: 900; z-index: 25; }
.bubble .arabic { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 56px; direction: rtl; display: block; font-weight: 400; }
.bubble:after { content: ""; position: absolute; bottom: -26px; left: 50%; margin-left: -18px; border: 18px solid transparent; border-top-color: #fff; border-bottom: 0; }
.banner { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); background: #fff; border-radius: 30px; padding: 10px 34px; font-size: 36px; font-weight: 900; box-shadow: var(--shadow); z-index: 20; white-space: nowrap; }
.big-play { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--sun); box-shadow: 0 12px 0 #e0a526; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 22; }
.big-play svg { width: 100px; height: 100px; }
.big-play .arabic { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 44px; direction: rtl; line-height: 1; }
.big-play.playing { animation: wiggle .5s ease-in-out infinite; }
.soon-card { position: absolute; left: 290px; top: 170px; width: 700px; height: 470px; border-radius: 50px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.soon-card .label { font-size: 56px; font-weight: 900; margin-top: 10px; }

/* Арабские слова */
.word-card { position: absolute; border-radius: 34px; background: #fff; box-shadow: var(--shadow); display: flex; align-items: center; gap: 6px; padding: 0 16px; transition: transform .18s; }
.word-card:hover { transform: scale(1.05); }
.word-card .wtext { flex: 1; text-align: center; }
.word-card .arabic { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 44px; direction: rtl; line-height: 1.3; }
.word-card .ru { font-size: 28px; font-weight: 900; }
.word-card .done { position: absolute; right: -12px; top: -12px; width: 60px; height: 60px; }
.word-pic { position: absolute; width: 460px; height: 460px; border-radius: 50px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.word-info { position: absolute; text-align: center; }
.word-info .arabic.big { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 130px; direction: rtl; line-height: 1.4; }
.word-info .ru { font-size: 64px; font-weight: 900; }
.word-info .meaning { font-size: 38px; font-weight: 700; color: #6b5bd6; }

/* Добрые дела и мини-игры */
.story-card { position: absolute; border-radius: 40px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s; }
.story-card:hover { transform: scale(1.05) rotate(-1deg); }
.story-card .label { font-size: 28px; font-weight: 900; text-align: center; line-height: 1.1; padding: 0 10px; }
.story-card .done { position: absolute; right: -12px; top: -12px; width: 64px; height: 64px; }
.puzzle-frame { position: absolute; border-radius: 30px; background: #fff; box-shadow: var(--shadow); outline: 6px dashed #b69cff; outline-offset: -3px; }
.puzzle-frame.solved { outline-color: #7fdcb0; }
.puzzle-piece { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 8px 0 rgba(59, 47, 74, .2); transition: left .6s cubic-bezier(.3, 1.3, .5, 1), top .6s cubic-bezier(.3, 1.3, .5, 1), transform .6s; z-index: 5; }
.puzzle-piece:hover { filter: brightness(1.04); }
.puzzle-piece.placed { box-shadow: none; border-radius: 0; cursor: default; }

/* Движок заданий */
.choice.speaking { box-shadow: 0 0 0 8px #ffd166, var(--shadow); transform: scale(1.04); }
.show-tile { position: absolute; border-radius: 30px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.show-tile.peek { background: #fff8ec; }
.qmark { font-size: 96px; font-weight: 900; color: #b69cff; }
.target { position: absolute; display: grid; place-items: center; border-radius: 50px; background: rgba(255,255,255,.7); box-shadow: var(--shadow); }
.thing { position: absolute; border-radius: 32px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .15s; z-index: 6; }
.thing:hover { transform: scale(1.06); }
.thing.selected { box-shadow: 0 0 0 8px #ffd166, var(--shadow); transform: scale(1.1) translateY(-10px); }
.thing.counted { background: #d7ffe9; }
.thing.big { border-radius: 50px; }
.count-badge { position: absolute; top: -14px; right: -14px; width: 56px; height: 56px; border-radius: 50%; background: #7fdcb0; color: #fff; font-size: 32px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(59,47,74,.2); }
.bin { position: absolute; border-radius: 36px; background: #fff3c4; box-shadow: var(--shadow); display: grid; place-items: center; }
.bin-count { position: absolute; top: 10px; right: 16px; font-size: 38px; font-weight: 900; color: #6b5bd6; }
.slot { position: absolute; border-radius: 30px; border: 6px dashed #b69cff; background: rgba(255,255,255,.5); }
.slot-num { position: absolute; top: -26px; left: -18px; width: 52px; height: 52px; border-radius: 50%; background: #b69cff; color: #fff; font-size: 30px; font-weight: 900; display: grid; place-items: center; }
.choice.placed { z-index: 7; box-shadow: none; }
.choice.num .digit { font-size: 110px; font-weight: 900; line-height: 1; }
.listen-box { position: absolute; border-radius: 44px; background: #fff; box-shadow: var(--shadow); padding: 26px 30px; text-align: center; }
.listen-box .arabic.big { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 62px; direction: rtl; line-height: 1.6; }
.listen-box .tr { font-size: 36px; font-weight: 900; margin-top: 8px; }
.listen-box .meaning { font-size: 30px; font-weight: 700; color: #6b5bd6; margin-top: 10px; }
.listen-box .check-note { font-size: 18px; color: #a0673f; margin-top: 14px; }
.mem { position: absolute; border-radius: 28px; background: #b69cff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .3s; }
.mem .mem-face { display: none; }
.mem .mem-back svg { width: 90px; height: 90px; }
.mem.open { background: #fff; transform: rotateY(0); }
.mem.open .mem-face { display: grid; place-items: center; }
.mem.open .mem-back { display: none; }
.mem.right { background: #d7ffe9; }
.puzzle-ghost { position: absolute; pointer-events: none; opacity: .22; transition: opacity .4s; z-index: 1; }
.pslot { position: absolute; border: 3px dashed #b69cff; background: transparent; z-index: 2; }
.pslot.filled { border-color: transparent; }
.puzzle-piece.selected { box-shadow: 0 0 0 8px #ffd166; z-index: 9; }
.puzzle-piece.placed { z-index: 3; }
.small-tool { position: absolute; }
.mcell { position: absolute; border: 2px solid rgba(59,47,74,.15); display: grid; place-items: center; }
.mcell.wall { background: #9be38f; }
.mcell.road { background: #d9d4e4; }
.mcell.reached { background: #ffe9a8; }
.mcar { position: absolute; display: grid; place-items: center; pointer-events: none; transition: left .3s, top .3s; z-index: 5; }
.ready-btn { position: absolute; border-radius: 40px; background: #7fdcb0; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 38px; font-weight: 900; color: #fff; }
.ready-btn svg { width: 80px; height: 80px; }
.level-dot { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s; }
.level-dot:hover { transform: scale(1.07); }
.level-dot .lnum { font-size: 90px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 5px 0 rgba(59,47,74,.2); }
.level-dot .lstars { font-size: 26px; font-weight: 900; color: #fff; margin-top: 4px; }
.game-card { position: absolute; border-radius: 40px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s; }
.game-card:hover { transform: scale(1.05) rotate(-1deg); }
.game-card .label { font-size: 24px; font-weight: 900; text-align: center; line-height: 1.1; padding: 0 12px; }
.game-card .done { position: absolute; right: -12px; top: -12px; width: 60px; height: 60px; }
.game-card .gnum { position: absolute; left: -10px; top: -10px; width: 52px; height: 52px; border-radius: 50%; background: #b69cff; color: #fff; font-size: 28px; font-weight: 900; display: grid; place-items: center; }
.game-card .mstars { font-size: 22px; font-weight: 900; color: #6b5bd6; }

.word-card2 { position: absolute; border-radius: 34px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s; }
.word-card2:hover { transform: scale(1.05); }
.word-card2 .arabic { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 44px; direction: rtl; line-height: 1.3; }
.word-card2 .tr { font-size: 28px; font-weight: 900; }
.word-card2 .ru { font-size: 22px; font-weight: 700; color: #6b5bd6; }
.word-card2 .ear { position: absolute; top: -18px; right: -18px; width: 60px; height: 60px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; box-shadow: 0 5px 0 rgba(59,47,74,.2); }
.word-card2 .ear svg { width: 38px; height: 38px; }
.choice .arabic { font-size: 50px; }

.deed-marks { font-size: 26px; color: #ffb000; min-height: 34px; text-align: center; padding: 0 8px; line-height: 1.1; }
.parent-btn { position: absolute; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 rgba(59,47,74,.18); font-size: 20px; font-weight: 700; color: #7a6b8a; }

/* Закрытые уровни и игры */
.locked { filter: grayscale(.85); opacity: .6; }
.locked .lock { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); filter: none; }
.game-card.locked .lock { top: 42%; }

/* Родительский режим */
.parent-panel { position: absolute; inset: 0; background: rgba(59,47,74,.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.parent-box { background: #fff; border-radius: 32px; padding: 36px 44px; width: 760px; box-shadow: var(--shadow); font-size: 30px; font-weight: 800; color: #3b2f4a; }
.parent-box h2 { margin: 0 0 18px; font-size: 40px; }
.parent-box button { display: block; width: 100%; margin: 12px 0; padding: 18px; font-size: 28px; font-weight: 800; border-radius: 20px; background: #ece4ff; }
.parent-box .note { font-size: 20px; font-weight: 600; color: #6d6280; margin-top: 10px; }

/* Обведи букву */
.trace-box { position: absolute; background: #fffdf6; border-radius: 40px; box-shadow: var(--shadow); overflow: hidden; }
.trace-box.solved { box-shadow: 0 0 0 10px #7fdcb0, var(--shadow); }
.trace-cv { width: 100%; height: 100%; touch-action: none; cursor: pointer; display: block; }