@import "https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;600;800&display=swap";
.books-page{direction:rtl;background:linear-gradient(135deg,#fff9c4 0%,#ffe0f0 45%,#e0f4ff 100%);min-height:100vh;font-family:"Baloo Bhaijaan 2",cursive;position:relative;overflow-x:hidden}.page-container{z-index:1;max-width:1100px;margin:0 auto;padding:32px 20px 72px;position:relative}.deco{pointer-events:none;z-index:0;opacity:.22;font-size:2.4rem;animation:linear infinite floatDeco;position:fixed}.deco-1{animation-duration:8s;top:4%;left:4%}.deco-2{animation-duration:6s;animation-delay:1s;top:14%;right:7%}.deco-3{animation-duration:7s;animation-delay:2s;top:58%;left:2%}.deco-4{animation-duration:9s;animation-delay:.5s;top:68%;right:4%}.deco-5{animation-duration:5s;animation-delay:3s;top:83%;left:13%}.deco-6{animation-duration:8s;animation-delay:1.5s;top:38%;right:2%}@keyframes floatDeco{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-18px)rotate(10deg)}}.page-header{text-align:center;margin-bottom:24px}.mascot{margin-bottom:8px;font-size:5rem;line-height:1;animation:2.2s ease-in-out infinite bounceMascot;display:block}@keyframes bounceMascot{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-14px)scale(1.06)}}.page-header h1{color:#2d3748;text-shadow:3px 3px #fffc;font-size:clamp(2rem,6vw,3.4rem);font-weight:800}.page-header p{color:#6b7280;margin-top:6px;font-size:1.15rem}.stars-row{justify-content:center;gap:8px;margin-top:10px;display:flex}.stars-row span{font-size:1.4rem;animation:1.6s ease-in-out infinite starPop;display:inline-block}@keyframes starPop{0%,to{transform:scale(1)}50%{transform:scale(1.35)rotate(15deg)}}.grade-pill{color:#374151;background:#fff;border:2.5px solid #e5e7eb;border-radius:999px;align-items:center;gap:6px;margin-bottom:32px;padding:6px 20px;font-size:1rem;font-weight:700;display:inline-flex;box-shadow:0 2px 8px #0000000f}.cards-grid{grid-template-columns:repeat(3,1fr);gap:28px;display:grid}@media (max-width:800px){.cards-grid{grid-template-columns:repeat(2,1fr);gap:20px}}@media (max-width:520px){.cards-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto}}.book-card{background:var(--card-light,#fffef7);text-align:center;cursor:pointer;border:3.5px solid #0000;border-radius:32px;padding:28px 18px 22px;transition:transform .22s,box-shadow .22s,border-color .22s;animation:.55s cubic-bezier(.34,1.56,.64,1) both cardIn;position:relative;overflow:hidden;box-shadow:0 8px #00000012,0 14px 28px #00000012}@keyframes cardIn{0%{opacity:0;transform:translateY(36px)scale(.82)}to{opacity:1;transform:translateY(0)scale(1)}}.book-card:hover{box-shadow:0 16px 0 #0000000e,0 22px 44px var(--card-shadow,#0000001a);border-color:var(--card-color,#ff6b9d);transform:translateY(-8px)scale(1.025)}.book-card.selected{border-color:var(--card-color,#ff6b9d);box-shadow:0 0 0 4px var(--card-color),0 18px 36px var(--card-shadow);pointer-events:none;animation:.45s cubic-bezier(.34,1.56,.64,1) forwards cardShake}@keyframes cardShake{0%{transform:translateY(-8px)scale(1.02)}30%{transform:translateY(-12px)scale(1.07)rotate(-1.5deg)}60%{transform:translateY(-12px)scale(1.07)rotate(1.5deg)}to{transform:translateY(-6px)scale(1.05)}}.shimmer{pointer-events:none;background:linear-gradient(120deg,#0000 0%,#ffffff8c 50%,#0000 100%) 0 0/200% 100%;border-radius:28px;animation:.8s forwards shimmerSlide;position:absolute;inset:0}@keyframes shimmerSlide{0%{background-position:200% 0}to{background-position:-200% 0}}.badge{color:#fff;z-index:2;border-radius:999px;padding:4px 12px;font-size:.72rem;font-weight:800;position:absolute;top:-12px;right:18px;box-shadow:0 3px 8px #0000002e}.check-mark{background:var(--card-color);color:#fff;opacity:0;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.95rem;transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:13px;left:13px;transform:scale(0)}.check-mark.visible{opacity:1;transform:scale(1)}.card-emoji{filter:drop-shadow(0 4px 6px #0000001a);margin-bottom:10px;font-size:4.2rem;transition:transform .28s;display:block}.book-card:hover .card-emoji{transform:scale(1.12)rotate(-6deg)}.card-emoji.spin{animation:.5s ease-in-out emojiPop}@keyframes emojiPop{0%{transform:scale(1)rotate(0)}45%{transform:scale(1.45)rotate(12deg)}to{transform:scale(1)rotate(0)}}.card-title{color:#2d3748;margin-bottom:4px;font-size:1.55rem;font-weight:800;line-height:1.2}.card-subtitle{color:#9ca3af;margin-bottom:16px;font-size:.88rem}.progress-wrap{background:#eee;border-radius:999px;height:9px;margin:0 6px 10px;overflow:hidden}.progress-bar{border-radius:999px;height:100%;transition:width 1.1s .4s}.progress-label{color:#9ca3af;margin-bottom:16px;font-size:.78rem}.btn-row{justify-content:center;gap:10px;display:flex}.btn-sound{cursor:pointer;background:#fff;border-style:solid;border-width:2.5px;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.15rem;transition:all .2s;display:flex}.btn-sound:hover{background:var(--card-color);transform:scale(1.1)}.btn-sound.playing{background:var(--card-color);animation:.38s infinite alternate soundPulse}@keyframes soundPulse{0%{transform:scale(1)}to{transform:scale(1.18)}}.btn-choose{color:#fff;cursor:pointer;border:none;border-radius:999px;flex:1;padding:10px 14px;font-family:"Baloo Bhaijaan 2",cursive;font-size:1rem;font-weight:800;transition:all .2s;box-shadow:0 4px #00000024}.btn-choose:hover{transform:translateY(-2px);box-shadow:0 6px #0000001a}.btn-choose:active{transform:translateY(2px);box-shadow:0 2px #0000001a}