*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;height:100dvh}body{font-family:Chalkboard SE,Comic Sans MS,Segoe UI,sans-serif;background-color:#f8fafc;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}.app-shell{height:100%;height:100dvh;display:flex;flex-direction:column;min-height:0}h1{color:#4f46e5;margin:0;padding:10px;font-size:1.8rem;text-align:center;text-shadow:2px 2px 0 rgba(79,70,229,.1);background:#f8fafc;flex-shrink:0}.top-bar{display:flex;gap:10px;background:#fff;padding:10px 20px;box-shadow:0 2px 4px #0000001a;align-items:center;flex-wrap:wrap;justify-content:center;border-bottom:2px solid #e0e7ff;flex-shrink:0}.stats-bar{background:#fff;padding:8px 20px;box-shadow:0 2px 4px #0000001a;display:flex;gap:15px;align-items:center;font-size:.85rem;color:#64748b;flex-wrap:wrap;justify-content:center;border-bottom:1px solid #e0e7ff;flex-shrink:0}.stat-item{display:flex;align-items:center;gap:5px}.stat-number{font-weight:700;color:#4f46e5;font-size:1rem}.canvas-scroll-area{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:16px 10px;display:flex;justify-content:center;align-items:flex-start}#canvas-container{border-radius:24px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:6px solid white;background:#fff;max-width:100%;margin:0 auto}select{padding:8px 12px;border-radius:12px;border:2px solid #e0e7ff;font-size:1rem;font-weight:700;color:#4338ca;background:#eef2ff;cursor:pointer;outline:none;-webkit-appearance:none}button{background-color:#4f46e5;color:#fff;border:none;padding:8px 16px;border-radius:99px;font-size:.95rem;cursor:pointer;transition:all .2s;font-weight:700;box-shadow:0 3px #3730a3}button:active{transform:translateY(3px);box-shadow:none}button:disabled{background-color:#cbd5e1;box-shadow:none;cursor:not-allowed;transform:translateY(2px)}button.secondary{background-color:#ec4899;box-shadow:0 3px #be185d}#soundToggle{background-color:#f59e0b;box-shadow:0 3px #d97706;min-width:40px;padding:8px 12px}#soundToggle.muted{background-color:#9ca3af;box-shadow:0 3px #6b7280}#installBtn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px #5a67d8}.bottom-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px;padding-bottom:max(16px,env(safe-area-inset-bottom));background:linear-gradient(to top,#f8fafc 80%,transparent);box-shadow:0 -2px 10px #0000000d;flex-shrink:0}.narrator-box{background:#fff;padding:12px 20px;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a;position:relative;max-width:90%;width:100%;text-align:center;border:2px solid #e0e7ff;min-height:50px;display:flex;align-items:center;justify-content:center}.narrator-box:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);border-width:0 10px 10px 10px;border-style:solid;border-color:transparent transparent #e0e7ff transparent}.status-text{font-size:1rem;color:#3730a3;font-weight:700;line-height:1.3}button.action-btn{background-color:#10b981;box-shadow:0 4px #059669;font-size:1.2rem;padding:12px 40px;width:90%;max-width:400px}@media(max-width:768px){h1{font-size:1.5rem;padding:8px}.top-bar{padding:8px 10px;gap:8px}button{padding:6px 12px;font-size:.85rem}button.action-btn{font-size:1.05rem;padding:10px 30px}.narrator-box{padding:10px 15px;min-height:45px}.status-text{font-size:.95rem}}@media(orientation:landscape)and (max-height:900px){h1{font-size:1.2rem;padding:5px;line-height:1.2}.stats-bar{display:none}.top-bar{padding:5px 10px;gap:6px}button{padding:4px 10px;font-size:.75rem}select{padding:4px 8px;font-size:.85rem}.canvas-scroll-area{padding:8px 5px}#canvas-container{border:3px solid white;border-radius:12px}.bottom-area{padding:8px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom));gap:6px}.narrator-box{padding:6px 12px;min-height:35px;border-radius:12px}.narrator-box:before{border-width:0 6px 6px 6px;top:-6px}.status-text{font-size:.8rem;line-height:1.2}button.action-btn{font-size:.95rem;padding:8px 25px;width:85%}}@media(orientation:landscape)and (max-height:600px){h1{font-size:1rem;padding:3px}.canvas-scroll-area{padding:4px}.bottom-area{padding:5px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:4px}.narrator-box{padding:4px 10px;min-height:30px}.status-text{font-size:.75rem}button.action-btn{font-size:.85rem;padding:6px 20px}}