:root{--bg-color: #87ceeb;--card-bg: #ffd700;--accent-color: #ff6347;--text-color: #2c3e50;--border-color: #2c3e50;--selected-glow: #32cd32}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Fredoka One,cursive;background-color:var(--bg-color);color:var(--text-color);line-height:1.6}.app-container{max-width:1200px;margin:0 auto;padding:15px}header{text-align:center;margin-bottom:20px}header h1{font-size:2.5rem;color:#fff;text-shadow:2px 2px 0 var(--border-color),-2px -2px 0 var(--border-color),2px -2px 0 var(--border-color),-2px 2px 0 var(--border-color)}.animal-selection{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:25px;flex:1}.animal-card{background-color:var(--card-bg);border:3px solid var(--border-color);border-radius:15px;padding:10px;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:120px;box-shadow:5px 5px 0 var(--border-color);position:relative}.animal-card:hover{transform:translateY(-5px);box-shadow:8px 8px 0 var(--border-color)}.animal-card.selected{transform:scale(1.05);border-color:var(--selected-glow);box-shadow:0 0 20px var(--selected-glow)}.animal-card img{width:80px;height:80px;object-fit:cover;border-radius:10px}.animal-card span{display:block;margin-top:5px;font-size:1.1rem}.animal-lock-icon{position:absolute;top:0;right:2px;font-size:1rem;pointer-events:none}#create-story-btn{display:block;width:100%;max-width:300px;margin:0 auto 25px;padding:15px 20px;font-family:Fredoka One,cursive;font-size:1.5rem;color:#fff;background-color:var(--accent-color);border:3px solid var(--border-color);border-radius:15px;cursor:pointer;box-shadow:5px 5px 0 var(--border-color);transition:all .2s ease}#create-story-btn:hover{transform:translateY(-3px);box-shadow:8px 8px 0 var(--border-color)}#create-story-btn:active{transform:translateY(2px);box-shadow:3px 3px 0 var(--border-color)}#create-story-btn:disabled{background-color:#aaa;cursor:not-allowed;box-shadow:none;transform:none}.spinner{display:inline-block;width:20px;height:20px;border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-left:10px}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}#story-display{background-color:#fff;border-radius:15px;border:3px solid var(--border-color);margin-bottom:25px}#story-title{margin:15px}#story-audio-player{width:100%;margin-bottom:15px}#story-images-card{background-color:#ffffffe6;padding:15px;border-radius:15px;border:3px solid var(--border-color)}#story-text{margin:10px}#playlist-container{background-color:#ffffffb3;padding:15px;border-radius:15px;border:3px solid var(--border-color);display:flex;flex-direction:column}#playlist{list-style:none;flex:1;overflow-y:auto}#playlist li{padding:10px;margin-bottom:5px;background-color:var(--card-bg);border-radius:8px;border:2px solid var(--border-color);cursor:pointer;transition:background-color .2s}#playlist li:hover{background-color:#f7c800}#playlist li.playing{background-color:var(--selected-glow);color:#fff}.cards-layout,.row-top,.row-bottom{display:flex;flex-direction:column;gap:20px}@media(min-width:768px){.row-top,.row-bottom{flex-direction:row;gap:25px}.row-top{align-items:stretch}.row-top>main{flex:2;display:flex;flex-direction:column}.row-top>#playlist-container{flex:1}.row-bottom{align-items:flex-start}.row-bottom>#story-display{flex:2;margin-bottom:0}.row-bottom>#story-images-card{flex:1}}.main-content,buy-credits-screen{transition:opacity .25s ease,transform .25s ease}.main-content{opacity:1;transform:translate(0)}.main-content.hidden-main{opacity:0;transform:translate(-10px);pointer-events:none}buy-credits-screen.hidden{opacity:0;transform:translate(10px);pointer-events:none}buy-credits-screen:not(.hidden){opacity:1;transform:translate(0)}.app-views{position:relative;min-height:400px}.app-views>.main-content,.app-views>buy-credits-screen{position:absolute;inset:0}.app-views>.main-content,.app-views>buy-credits-screen{transition:opacity .25s ease,transform .25s ease}.app-views>.main-content{opacity:1;transform:translate(0)}.app-views>.main-content.hidden-main{opacity:0;transform:translate(-10px);pointer-events:none}.app-views>buy-credits-screen.hidden{opacity:0;transform:translate(10px);pointer-events:none}.app-views>buy-credits-screen:not(.hidden){opacity:1;transform:translate(0)}