:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #FFF8F0;--text: #2D3436;--card-radius: 24px;--transition: .2s ease;--font-main: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;--shadow-card: 0 6px 20px rgba(0, 0, 0, .08);--shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .15)}body{font-family:var(--font-main);background:radial-gradient(circle,rgba(99,102,241,.06) 1px,transparent 1px),radial-gradient(circle,rgba(245,158,11,.06) 1px,transparent 1px),linear-gradient(135deg,#fff8f0,#fde8e0 30%,#e8f0fe 70%,#fff8f0);background-size:30px 30px,30px 30px,100% 100%;background-position:0 0,15px 15px,0 0;background-attachment:fixed;color:var(--text);min-height:100dvh;-webkit-tap-highlight-color:transparent;overflow-x:hidden}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-glow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@keyframes star-burst{0%{transform:scale(1);box-shadow:0 0 #f59e0b66}30%{transform:scale(1.12);box-shadow:0 0 0 15px #f59e0b00}50%{transform:scale(.95)}70%{transform:scale(1.05)}to{transform:scale(1);box-shadow:0 0 #f59e0b00}}@keyframes drift{0%{transform:translateY(0) rotate(0);opacity:.15}50%{transform:translateY(-30px) rotate(10deg);opacity:.25}to{transform:translateY(0) rotate(0);opacity:.15}}@keyframes rainbow-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.08)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes confetti-pop{0%{transform:scale(0) translate(-50%,-50%);opacity:1}50%{transform:scale(1.2) translate(-50%,-50%);opacity:.8}to{transform:scale(1.5) translate(-50%,-80%);opacity:0}}.app{min-height:100dvh;padding-bottom:2rem;position:relative}.home{padding:1.5rem;max-width:900px;margin:0 auto;position:relative}.home:before{content:"☬";position:fixed;top:10%;right:5%;font-size:2rem;opacity:.15;animation:drift 6s ease-in-out infinite;pointer-events:none;z-index:0}.home:after{content:"🙏";position:fixed;bottom:15%;left:8%;font-size:2.5rem;opacity:.12;animation:drift 8s ease-in-out 1s infinite;pointer-events:none;z-index:0}.home-header{text-align:center;padding:2rem 0 1.5rem;animation:bounce-in .6s ease-out}.home-title{display:flex;flex-direction:column;gap:.25rem}.title-punjabi{font-size:3rem;font-weight:900;background:linear-gradient(135deg,#ff6b6b,#6366f1,#f59e0b,#10b981);background-size:200% 200%;animation:rainbow-shift 4s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.1))}.title-english{font-size:1.4rem;color:#636e72;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1.2rem;position:relative;z-index:1}.category-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.8rem 1rem;border-radius:var(--card-radius);background:var(--cat-color);color:#fff;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 20px #0000001f;min-height:180px;position:relative;overflow:hidden;opacity:0;animation:fadeInUp .5s ease forwards,float 3s ease-in-out 1s infinite}.category-card:nth-child(2n){animation:fadeInUp .5s ease forwards,float 3s ease-in-out 1.5s infinite}.category-card:before{content:"";position:absolute;inset:0;border-radius:var(--card-radius);padding:3px;background:linear-gradient(135deg,#fff6,#fff0,#fff6);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.category-card:active{transform:scale(.92)!important}@media(hover:hover){.category-card:hover{transform:scale(1.08) rotate(1deg);box-shadow:0 12px 32px #0003}}.category-emoji{font-size:4rem;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.15))}.category-punjabi{font-size:1.5rem;font-weight:800;text-shadow:1px 1px 2px rgba(0,0,0,.15)}.category-english{font-size:1rem;opacity:.9;font-weight:600}.category-page{padding:1rem 1.5rem;max-width:900px;margin:0 auto;background:linear-gradient(180deg,color-mix(in srgb,var(--cat-color) 8%,transparent) 0%,transparent 40%);min-height:100dvh}.category-header{text-align:center;padding:1rem 0 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:bounce-in .5s ease-out}.category-header-emoji{font-size:4rem;filter:drop-shadow(2px 3px 4px rgba(0,0,0,.15));animation:float 2.5s ease-in-out infinite}.category-header h1{display:flex;flex-direction:column;gap:.15rem}.header-punjabi{font-size:2.4rem;font-weight:900;color:var(--cat-color);text-shadow:2px 2px 4px rgba(0,0,0,.08)}.header-english{font-size:1.2rem;color:#636e72;font-weight:600}.back-button{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.4rem;border:none;border-radius:50px;background:#fff;color:var(--text);font-size:1.1rem;font-weight:700;font-family:var(--font-main);cursor:pointer;transition:all var(--transition);box-shadow:0 2px 8px #00000014;text-decoration:none}.back-button:active{transform:scale(.92);background:#f1f2f6}@media(hover:hover){.back-button:hover{background:#f1f2f6;box-shadow:0 4px 12px #0000001f}}.flashcard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1.2rem}.alphabet-grid{grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}.flash-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.4rem .8rem;border:none;border-radius:var(--card-radius);background:#fff;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;box-shadow:var(--shadow-card);min-height:155px;-webkit-user-select:none;user-select:none;font-family:var(--font-main);position:relative;overflow:hidden;opacity:0;animation:fadeInUp .4s ease forwards}.flash-card:nth-child(4n+1){--rot: -1deg}.flash-card:nth-child(4n+2){--rot: .5deg}.flash-card:nth-child(4n+3){--rot: -.5deg}.flash-card:nth-child(4n){--rot: 1deg}.flash-card{transform:rotate(var(--rot, 0deg))}.flash-card:before{content:"";position:absolute;inset:0;border-radius:var(--card-radius);padding:3px;background:linear-gradient(135deg,#ff6b6b,#f59e0b,#10b981,#6366f1,#ec4899,#ff6b6b);background-size:300% 300%;animation:rainbow-shift 6s ease infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.4;transition:opacity .3s ease}.flash-card:hover:before,.flash-card:active:before{opacity:1}.flash-card:active{transform:scale(.93) rotate(0)!important}@media(hover:hover){.flash-card:hover{transform:scale(1.05) rotate(0)!important;box-shadow:var(--shadow-card-hover)}}.flash-card.tapped{animation:star-burst .5s ease!important}.flash-card.tapped:after{content:"✨";position:absolute;top:20%;left:50%;font-size:1.5rem;pointer-events:none;animation:confetti-pop .6s ease forwards}.flash-card-image{width:90px;height:90px;object-fit:cover;border-radius:16px;border:3px solid rgba(0,0,0,.05);box-shadow:0 2px 8px #0000001a}.flash-card-emoji{font-size:3.5rem;line-height:1;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.1))}.flash-card-punjabi{font-size:1.9rem;font-weight:900;color:var(--text);line-height:1.2;text-shadow:1px 1px 2px rgba(0,0,0,.05)}.flash-card-romanized{font-size:.8rem;color:#8b5cf6;font-weight:700;font-style:italic;letter-spacing:.02em}.flash-card-english{font-size:.95rem;color:#636e72;font-weight:600}.tap-hint{font-size:.65rem;color:#f59e0b;text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem;font-weight:700;animation:pulse-glow 2s ease-in-out infinite}.color-swatch{width:60px;height:60px;border-radius:50%;border:3px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #0000001a}.alphabet-card{min-height:120px;padding:.8rem .5rem}.alphabet-letter{font-size:3rem;font-weight:900}.alphabet-card .flash-card-english{font-size:.8rem}.alphabet-card .tap-hint{font-size:.55rem}@media(max-width:480px){.home{padding:1rem}.title-punjabi{font-size:2.4rem}.title-english{font-size:1.1rem}.category-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.category-card{min-height:155px;padding:1.4rem .8rem}.category-emoji{font-size:3.2rem}.flashcard-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.alphabet-grid{grid-template-columns:repeat(3,1fr);gap:.6rem}.flash-card{min-height:135px;padding:1.1rem .5rem}.flash-card-emoji{font-size:2.8rem}.flash-card-image{width:70px;height:70px}.flash-card-punjabi{font-size:1.5rem}.home:before,.home:after{font-size:1.5rem}}@media(min-width:768px){.category-grid,.flashcard-grid{grid-template-columns:repeat(4,1fr)}.alphabet-grid{grid-template-columns:repeat(5,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}