/* A calm, consistent shell; coloring artwork keeps its original outlines. */
:root {
  --ink: #293d3b;
  --cream: #f7f8f4;
  --mint: #b9dfce;
  --sun: #f4d99b;
  --shadow: 0 6px 20px rgba(39, 66, 57, .07), 0 1px 3px rgba(39, 66, 57, .04);
}
html, body { background: #e8eeea; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
#stage { background: #f7f8f4; }
#topbar { top: 22px; left: 28px; right: 28px; height: 64px; gap: 12px; }
.tb-btn { width: 64px; height: 64px; border-radius: 20px; border: 1px solid #e3e9e4; }
.tb-btn svg { width: 34px; height: 34px; }
.tb-stars { height: 58px; border-radius: 18px; padding: 0 18px; font-size: 26px; border: 1px solid #e3e9e4; }
.tb-stars svg { width: 32px; height: 32px; }
.banner { left: 118px; right: 355px; top: 26px; transform: none; padding: 10px 0; background: transparent; box-shadow: none; border-radius: 0; font-size: 29px; white-space: normal; line-height: 1.2; }
.title, .lesson-title { text-shadow: none; }
.home-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 12% 15%, #e3f1e8, transparent 48%), radial-gradient(ellipse at 95% 90%, #f5ead8, transparent 45%); pointer-events: none; }
.home-title { color: #254b41; letter-spacing: -2px; font-weight: 750; }
.home-caption, .welcome-caption { position: absolute; left: 0; right: 0; text-align: center; color: #62756c; font-size: 25px; }
.home-caption { top: 192px; }
.welcome-caption { top: 412px; font-size: 28px; }
.welcome-mark { position: absolute; left: 548px; top: 102px; width: 184px; height: 174px; display: grid; place-items: center; background: #fff; border-radius: 48px; box-shadow: var(--shadow); }
.start-play { top: 510px; left: 440px; margin: 0; width: 400px; height: 96px; display: flex; align-items: center; justify-content: center; gap: 20px; background: #2d6a55; color: #fff; border-radius: 28px; box-shadow: 0 8px 24px #2d6a5526; animation: none; font-size: 30px; font-weight: 650; }
.start-play svg { width: 44px; height: 44px; }
.big-card, .choice, .game-card, .show-tile, .thing, .target, .col-tab, .col-thumb, .word-card, .word-card2, .story-card, .bin, .tool { border-radius: 26px; border: 1px solid #e0e7e1; }
.big-card { gap: 20px; background: #fff; }
.section-picture { width: 150px; height: 134px; display: grid; place-items: center; background: var(--card-tint); border-radius: 28px; }
.section-letter { font-family: "Noto Naskh Arabic", "DejaVu Sans", serif; font-size: 90px; color: #527b9a; }
.big-card .label { font-size: 27px; font-weight: 650; }
.game-card .label { font-weight: 650; line-height: 1.25; }
.big-card:hover, .choice:hover, .game-card:hover, .thing:hover, .col-thumb:hover, .col-tab:hover, .level-dot:hover, .tool:hover, .tb-btn:hover { transform: translateY(-3px); }
.big-card:active, .choice:active, .game-card:active, .tb-btn:active { transform: scale(.98); box-shadow: var(--shadow); }
.choice.right { background: #e2f2e8; box-shadow: inset 0 0 0 2px #75af90, var(--shadow); }
.choice .ctext { font-weight: 650; font-size: 29px; padding: 0 12px; max-width: 100%; box-sizing: border-box; }
.choice .ctext.long { font-size: 23px; padding: 0 8px; }
.choice-action { width: 100%; height: 100%; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.choice .ear { top: 8px; right: 8px; width: 44px; height: 44px; box-shadow: none; background: #f5ecd8; }
.choice .ear svg { width: 25px; height: 25px; }
.speaker, .speaker.small { background: #e4efe7; border-radius: 20px; box-shadow: none; }
.speaker.small { width: 64px; height: 64px; }
.speaker.small svg { width: 34px; height: 34px; }
.thing.selected { box-shadow: 0 0 0 4px #629b82, var(--shadow); transform: translateY(-3px); }
.thing.gone { pointer-events: none; background: transparent; border-color: transparent; box-shadow: none; }
.target { background: #fff; }
.cook-status { position: absolute; color: #567064; font-size: 24px; text-align: center; font-weight: 600; }
.level-dot { border: 1px solid #ffffffa6; }
.level-dot .lnum { color: #293d3b; text-shadow: none; font-weight: 700; }
.level-dot .lstars { color: #293d3b; font-weight: 600; }
.game-card .gnum { left: 12px; top: 12px; width: 38px; height: 38px; font-size: 22px; background: #e8eeea; color: #476357; }
.game-card .done { right: 10px; top: 10px; width: 40px; height: 40px; }
.game-card .mstars { font-size: 20px; color: #5a7768; }
.locked { filter: grayscale(.45); opacity: .62; }
.locked .lock { width: 70px; height: 70px; }
.slot { border: 2px dashed #a8c6b5; background: #eef3ef; border-radius: 24px; }
.slot-num { top: -16px; left: 8px; width: 36px; height: 36px; font-size: 22px; background: #638b75; }
.paint-wrap { border-radius: 28px; border: 1px solid #e0e7e1; }
.tools { right: 28px; width: 280px; }
.palette { left: 32px; width: 190px; gap: 12px; }
.paint-color { border-width: 4px; box-shadow: 0 2px 7px #29453620; }
.paint-color.sel { transform: scale(1.08); }
.cur-color { height: 46px; border-width: 4px; }
.col-tab.active { background: #e3f0e7; box-shadow: inset 0 0 0 2px #75af90; }
.arrow-next { width: 108px; height: 108px; right: 30px; bottom: 26px; animation: none; }
.arrow-next svg { width: 65px; height: 65px; }
.bounce-in { animation: appear .24s ease-out backwards; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.float, .hint-glow { animation: none; }
button:focus-visible, [role="button"]:focus-visible { outline: 4px solid #397b61; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}