:root{color:#1f2937;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;font-family:Trebuchet MS,Segoe UI,sans-serif;font-weight:600;line-height:1.5}*{box-sizing:border-box}html,body,#root{background:#f7f0ff;width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh}button{font:inherit}.app-shell{background:linear-gradient(#fff4d6 0%,#f4f0ff 40%,#dff7ff 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.phone-screen{background:linear-gradient(#fffdf7 0%,#f7f7ff 100%);border:4px solid #fffc;border-radius:32px;width:min(100%,430px);min-height:860px;padding:22px 18px 26px;box-shadow:0 30px 60px #6d4cd22e}.topbar{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#7c6ccf;margin:0 0 4px;font-size:.72rem;font-weight:700}h1,h2,h3,p,button{margin:0}.app-title{letter-spacing:-.06em;color:#1f2937;margin:0;font-size:clamp(2.8rem,9vw,4rem);font-weight:900;line-height:.95}h2{color:#1f2937;font-size:1.2rem;line-height:1.2}.mini-badge,.back-button,.small-button{background:#fff;border:none;border-radius:14px;box-shadow:0 8px 20px #7b58af1f}.mini-badge{width:52px;height:52px;font-size:1.7rem}.back-button{color:#342b5d;width:44px;height:44px;font-size:1.8rem}.title-spacer{width:44px;height:44px}.welcome-card{background:linear-gradient(135deg,#ffe29a 0%,#ffb1c7 100%);border-radius:24px;justify-content:space-between;align-items:center;gap:14px;padding:18px 16px;display:flex;box-shadow:inset 0 1px #ffffff80}.welcome-label{text-transform:uppercase;letter-spacing:.12em;color:#37271cb3;margin-bottom:6px;font-size:.72rem;font-weight:700}.welcome-card h2{color:#382b25;max-width:220px}.sparkle{font-size:2.5rem}.home-screen{flex-direction:column;padding-top:16px;display:flex}.home-topbar{margin-bottom:12px}.home-title-wrap{flex-direction:column;align-items:flex-start;width:100%;display:flex}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;display:grid}.game-card{color:#1f2937;text-align:center;background:linear-gradient(#ffffffeb,#ffffffb3);border:3px solid #fffc;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:150px;padding:14px 12px;font-weight:800;transition:transform .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden;box-shadow:0 16px 28px #58549629}.game-card:before{content:"";border-radius:inherit;background:linear-gradient(180deg, var(--card-color) 0%, #ffffff40 100%);opacity:.8;position:absolute;inset:0}.game-card>*{z-index:1;position:relative}.game-card:active{transform:scale(.98);box-shadow:0 10px 18px #58549624}.game-icon{background:#ffffffd1;border-radius:22px;place-items:center;width:68px;height:68px;font-size:2.6rem;display:grid;box-shadow:0 10px 18px #0f172a14}.game-name{letter-spacing:-.02em;font-size:.96rem;line-height:1.2}.game-topbar{margin-bottom:12px}.games-title-wrap{text-align:center;flex:1}.game-panel{margin-top:8px}.panel-header{color:#4b5563;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:4px 4px 0;font-size:.92rem;font-weight:700;display:flex}.small-button{color:#2a2a61;min-width:82px;padding:10px 12px;font-size:.8rem;font-weight:700}.color-game-screen{padding:12px 10px 10px}.color-game-toolbar{justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px;display:flex}.color-grid{touch-action:none;background:0 0;border:none;border-radius:18px;gap:3px;width:100%;padding:0;display:grid;overflow:hidden}.color-button{aspect-ratio:1;width:100%;height:100%;min-height:0;box-shadow:none;touch-action:none;border:0;border-radius:0;margin:0;padding:0}.math-card{background:linear-gradient(#eef7ff 0%,#f6f1ff 100%);border-radius:26px;flex-direction:column;gap:16px;min-height:680px;padding:16px;transition:background .2s,box-shadow .2s,transform .2s;display:flex}.math-card.feedback-correct{background:linear-gradient(#ecfdf5 0%,#d1fae5 100%);box-shadow:inset 0 0 0 4px #16a34a2e}.math-card.feedback-wrong{background:linear-gradient(#fff1f2 0%,#ffe4e6 100%);animation:.25s ease-in-out math-shake;box-shadow:inset 0 0 0 4px #be185d29}@keyframes math-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-4px)}}.math-topline{justify-content:space-between;align-items:center;gap:10px;display:flex}.streak-pill{color:#2d3a8c;background:#fffc;border-radius:999px;justify-content:center;align-items:center;padding:8px 12px;font-size:.82rem;font-weight:800;display:inline-flex}.question-box{text-align:center;background:#ffffffb3;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;min-height:160px;padding:14px;display:flex}.equation{color:#1f2937;font-size:clamp(2.2rem,5vw,3rem);font-weight:900}.count-label{color:#1f2937;margin-bottom:14px;font-size:1.3rem;font-weight:800}.circle-scene{flex-wrap:wrap;justify-content:center;gap:8px;max-width:250px;display:flex}.count-circle{background:radial-gradient(circle at 30% 30%,#fff 0%,#60a5fa 30%,#2563eb 100%);border-radius:50%;width:18px;height:18px;box-shadow:0 4px 10px #2563eb40}.answer-display{color:#312e81;background:#fff;border-radius:18px;justify-content:center;align-items:center;min-height:74px;font-size:2rem;font-weight:900;transition:all .2s;display:flex;box-shadow:inset 0 0 0 2px #6366f126}.answer-display.correct{color:#166534;background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);box-shadow:inset 0 0 0 3px #15803d47}.answer-display.wrong{color:#9f1239;background:linear-gradient(135deg,#ffe4e6 0%,#fecdd3 100%);box-shadow:inset 0 0 0 3px #be185d40}.keypad{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.keypad-button,.choice-button{color:#1f2937;background:#fff;border:none;border-radius:18px;min-height:56px;font-size:1.4rem;font-weight:800;box-shadow:0 10px 20px #5a59961f}.keypad-button.wide{min-height:54px}.keypad-button.action{color:#fff;background:linear-gradient(135deg,#7dd3fc,#60a5fa)}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.choice-button{min-height:72px;font-size:1.8rem}.game-message{text-align:center;color:#374151;background:#ffffffb3;border-radius:999px;justify-content:center;align-self:center;align-items:center;min-height:28px;padding:8px 14px;font-weight:800;transition:all .2s;display:inline-flex}.game-message.correct{color:#166534;background:#22c55e2e}.game-message.wrong{color:#9f1239;background:#f43f5e24}.track-game-screen{padding:12px 10px 10px}.track-panel{flex-direction:column;gap:12px;display:flex}.track-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.track-status{color:#3b3f5c;background:#ffffffc7;border-radius:14px;align-items:center;min-height:42px;padding:8px 12px;font-size:.8rem;font-weight:800;display:inline-flex}.send-train-button{color:#fff;background:linear-gradient(135deg,#f59e0b,#f97316);border:none;border-radius:14px;padding:10px 14px;font-weight:800;box-shadow:0 10px 20px #f9731640}.track-grid{background:#94a3b840;border-radius:18px;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;padding:10px;display:grid;box-shadow:inset 0 0 0 2px #ffffff6b}.track-picker{z-index:30;background:#fffffff5;border-radius:18px;grid-template-columns:repeat(2,minmax(110px,1fr));gap:6px;max-width:260px;padding:10px;display:grid;position:fixed;transform:translate(-50%,-50%);box-shadow:0 20px 40px #0f172a2e}.track-picker-option{color:#1f2937;background:#f8fafc;border:1px solid #94a3b840;border-radius:12px;align-items:center;gap:6px;padding:8px 10px;font-size:.72rem;font-weight:700;display:flex}.tile-picker-glyph{font-size:1rem;line-height:1}.track-tile{aspect-ratio:1;color:#334155;background:#fffc;border:none;border-radius:12px;place-items:center;width:100%;transition:transform .15s,background .15s;display:grid;position:relative;box-shadow:inset 0 0 0 1px #94a3b859}.track-tile:active{transform:scale(.98)}.track-tile.track-lit{background:#bfdbfef2}.track-tile.train-active{background:#fde047e6}.track-tile.start-cell{background:#22c55ee6;box-shadow:inset 0 0 0 2px #16a34acc}.track-tile.end-cell{background:#ef4444e6;box-shadow:inset 0 0 0 2px #dc2626cc}.track-empty-dot{color:#33415552;font-size:1.5rem;line-height:1}.track-svg{color:#334155;width:100%;height:100%}.track-tile.track-lit .track-svg{color:#1d4ed8}.track-tile.train-active .track-svg{color:#7c2d12}.train-token{text-shadow:0 4px 12px #00000024;z-index:3;place-items:center;font-size:1.15rem;display:grid;position:absolute;inset:0}.sentence-game-screen{padding-top:12px}.sentence-scene-card{background:linear-gradient(#fff7ed 0%,#eefafc 100%);border-radius:28px;flex-direction:column;gap:16px;min-height:680px;padding:18px 16px 20px;display:flex;box-shadow:inset 0 0 0 3px #ffffff59}.sentence-scene-card.feedback-correct{background:linear-gradient(#ecfdf5 0%,#d1fae5 100%)}.sentence-scene-card.feedback-wrong{background:linear-gradient(#fff1f2 0%,#ffe4e6 100%)}.scene-visual{background:linear-gradient(135deg,#ffffffe6,#ffc87a6b);border:2px solid #fffc;border-radius:24px;place-items:center;width:100%;min-height:180px;font-size:5.5rem;display:grid}.scene-copy{text-align:center}.sentence-prompt{letter-spacing:.08em;text-transform:uppercase;color:#7c6ccf;margin:0 0 8px;font-size:.8rem;font-weight:800}.scene-copy h3{color:#1f2937;margin:0;font-size:1.3rem}.sentence-strip{flex-wrap:wrap;justify-content:center;gap:8px;min-height:76px;padding:8px 4px;display:flex}.sentence-slot{border-radius:16px;justify-content:center;align-items:center;min-width:72px;min-height:58px;padding:8px 10px;font-size:.95rem;font-weight:800;transition:all .15s;display:flex}.sentence-slot.fixed-slot{color:#1f2937;background:0 0;border:none;min-width:auto;padding:0;font-weight:800}.sentence-slot.blank-slot{color:#1f2937;background:0 0;border:none;border-radius:0;min-width:86px;box-shadow:inset 0 -2px #94a3b866}.sentence-slot.filled{color:#1f2937;background:0 0;border:none;border-radius:0}.slot-value,.fixed-word{display:block}.word-bank{background:#ffffff85;border:1px solid #94a3b82e;border-radius:22px;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px;display:flex}.word-button{color:#1f2937;background:linear-gradient(135deg,#fef3c7,#fcd34d);border:none;border-radius:14px;padding:12px 14px;font-size:.95rem;font-weight:800;box-shadow:0 8px 18px #fbbf2433}.word-button.used{opacity:.45;filter:grayscale(.2)}.sentence-actions{justify-content:center;gap:10px;margin-top:auto;display:flex}.small-button.secondary{background:#fff}.next-button-prominent{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);font-size:.9rem;transform:scale(1.04);box-shadow:0 12px 24px #22c55e4d}.letter-fill-screen{padding-top:12px}.letter-card{text-align:center;background:linear-gradient(#eef7ff 0%,#f6f1ff 100%);border-radius:26px;flex-direction:column;gap:16px;min-height:680px;padding:16px;transition:background .2s,box-shadow .2s,transform .2s;display:flex}.letter-card.feedback-correct{background:linear-gradient(#ecfdf5 0%,#d1fae5 100%);box-shadow:inset 0 0 0 4px #16a34a2e}.letter-card.feedback-wrong{background:linear-gradient(#fff1f2 0%,#ffe4e6 100%);box-shadow:inset 0 0 0 4px #be185d29}.letter-scene{background:#ffffffb3;border-radius:22px;place-items:center;width:100%;min-height:170px;font-size:5rem;display:grid}.letter-prompt{letter-spacing:.08em;text-transform:uppercase;color:#7c6ccf;margin:0;font-size:.82rem;font-weight:800}.letter-clue{letter-spacing:.12em;color:#1f2937;background:#ffffffb3;border-radius:18px;justify-content:center;align-items:center;min-width:180px;min-height:74px;padding:12px 18px;font-size:clamp(2.1rem,8vw,3.2rem);font-weight:900;display:flex}.letter-typing-box{color:#312e81;background:#fff;border-radius:18px;place-items:center;width:88px;height:88px;font-size:2.3rem;font-weight:900;display:grid;box-shadow:inset 0 0 0 2px #6366f126}.keyboard{flex-direction:column;gap:8px;width:100%;max-width:360px;display:flex}.keyboard-row{gap:8px;display:grid}.keyboard-row:first-child{grid-template-columns:repeat(10,minmax(0,1fr))}.keyboard-row:nth-child(2){grid-template-columns:repeat(9,minmax(0,1fr));padding:0 12px}.keyboard-row:nth-child(3){grid-template-columns:repeat(7,minmax(0,1fr));padding:0 28px}.keyboard-key{color:#1f2937;background:linear-gradient(135deg,#fff7ed,#fde68a);border:none;border-radius:12px;min-height:52px;font-size:1.2rem;font-weight:900;box-shadow:0 6px 12px #fbbf242e}.keyboard-key.active{background:linear-gradient(135deg,#bfdbfe,#93c5fd)}.game-message{margin:0;font-size:1rem;font-weight:800}.game-message.correct{color:#166534}.game-message.wrong{color:#9f1239}.calculator-screen{padding-top:12px}.calculator-card{background:linear-gradient(#f5f3ff 0%,#eff6ff 100%);border-radius:28px;flex-direction:column;gap:18px;min-height:680px;padding:16px;display:flex}.calculator-display{color:#1f2937;word-break:break-all;background:#ffffffbf;border-radius:22px;justify-content:flex-end;align-items:flex-end;min-height:120px;padding:18px 16px;font-size:clamp(2.4rem,8vw,3.3rem);font-weight:900;display:flex;overflow:hidden;box-shadow:inset 0 0 0 2px #a78bfa2e}.calculator-keypad{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto;display:grid}.calculator-key{color:#1f2937;background:linear-gradient(135deg,#fff,#f5f3ff);border:none;border-radius:18px;min-height:72px;font-size:1.8rem;font-weight:900;box-shadow:0 10px 16px #4c4f6e1a}.calculator-key.operator{color:#1d4ed8;background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.calculator-key.equal{color:#064e3b;background:linear-gradient(135deg,#a7f3d0,#34d399);grid-column:span 4}.sticky-notes-screen{padding-top:12px}.sticky-pad{flex-direction:column;gap:18px;display:flex}.sticky-modal-backdrop{z-index:40;background:#0f172a61;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.sticky-modal{background:linear-gradient(#fff7ed 0%,#ecfeff 100%);border-radius:24px;flex-direction:column;gap:12px;width:min(100%,360px);padding:18px 16px 16px;display:flex;box-shadow:0 30px 60px #0f172a38}.sticky-editor{background:linear-gradient(#fff7ed 0%,#ecfeff 100%);border-radius:24px;flex-direction:column;gap:12px;padding:14px;display:flex;box-shadow:inset 0 0 0 3px #ffffff61}.editor-title-row{letter-spacing:.08em;text-transform:uppercase;color:#6b7280;justify-content:space-between;align-items:center;gap:12px;font-size:.78rem;font-weight:800;display:flex}.text-button{color:#9f1239;letter-spacing:.04em;background:0 0;border:none;font-size:.72rem;font-weight:800}.sticky-textarea{resize:none;color:#1f2937;background:#fffc;border:none;border-radius:18px;width:100%;min-height:170px;padding:14px 16px;font-size:1rem;font-weight:700;box-shadow:inset 0 0 0 2px #fbbf242e}.sticky-textarea:focus{outline:2px solid #a855f752}.editor-actions{justify-content:space-between;gap:10px;display:flex}.small-button.primary{color:#fff;background:linear-gradient(135deg,#f472b6,#ec4899)}.small-button.secondary{color:#1f2937;background:#ffffffd1}.sticky-note-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.add-note-button{color:#fff;background:linear-gradient(135deg,#f472b6,#ec4899);border:none;border-radius:16px;min-height:54px;font-weight:800;box-shadow:0 14px 22px #ec489938}.sticky-note{border:none;border-radius:18px;justify-content:center;align-items:flex-start;min-height:120px;padding:14px 12px;transition:transform .15s,box-shadow .15s;display:flex;position:relative;transform:rotate(-1deg);box-shadow:0 10px 20px #6d4cd21f}.sticky-note:nth-child(2n){transform:rotate(1deg)}.sticky-note.selected{outline:3px solid #ffffffb3;box-shadow:0 12px 22px #6d4cd233}.note-preview{-webkit-line-clamp:5;text-overflow:ellipsis;color:#382b25;white-space:pre-wrap;-webkit-box-orient:vertical;font-size:.9rem;font-weight:800;line-height:1.4;display:-webkit-box;overflow:hidden}.empty-notes{color:#4b5563;text-align:center;background:#ffffffb3;border-radius:18px;grid-column:1/-1;justify-content:center;align-items:center;min-height:120px;padding:18px;font-weight:700;display:flex}.coming-soon-card{text-align:center;background:linear-gradient(#f8f5ff,#eef6ff);border-radius:28px;flex-direction:column;justify-content:center;align-items:center;min-height:420px;padding:28px 20px;display:flex}.coming-soon-emoji{margin-bottom:10px;font-size:4rem}.coming-soon-card h3{color:#312e81;margin-bottom:10px;font-size:1.7rem}.coming-soon-card p{color:#4b5563;max-width:250px}button{cursor:pointer;font:inherit}button:active{transform:scale(.98)}@media (width<=420px){.app-shell{padding:8px}.phone-screen{border-width:0;border-radius:0;min-height:100vh;padding:18px 14px 20px}}
