@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Caveat:wght@400;700&family=Inter:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:#ffffff;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px);position:relative;overflow-x:hidden;font-family:Kalam,cursive}.hero{width:100%;padding:0;margin:0;position:relative;display:block;overflow:hidden;z-index:10}.hero .banner-image{width:100%;height:auto;display:block;object-fit:cover;margin:0;padding:0}.hero:after{content:"";position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.7) 70%,rgb(255,255,255) 100%);pointer-events:none}.main-content{max-width:1400px;margin:0 auto;padding:60px 20px;position:relative;z-index:10}.legend-section{margin-bottom:80px;padding:50px 40px;background:rgba(255,255,255,.7);border:5px solid #000;border-radius:16px;transform:rotate(.4deg);box-shadow:10px 10px #0000001f,inset 0 0 0 3px #ffffffe6;position:relative;z-index:10;animation:wiggle 8s ease-in-out infinite}.legend-section:before{content:"✨";position:absolute;top:-20px;left:30px;font-size:40px;transform:rotate(-20deg);animation:iconFloat 3s ease-in-out infinite;z-index:11}.legend-section:after{content:"⭐";position:absolute;top:-20px;right:30px;font-size:40px;transform:rotate(20deg);animation:iconFloat 3s ease-in-out infinite 1.5s;z-index:11}.legend-section .legend-content{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}@media (max-width: 968px){.legend-section .legend-content{grid-template-columns:1fr;gap:30px;text-align:center}}.legend-section .legend-content .legend-text .section-title{font-family:Caveat,cursive;font-size:clamp(42px,6vw,64px);font-weight:700;color:#000;margin-bottom:25px;transform:rotate(-.6deg);text-shadow:3px 3px 0px rgba(0,0,0,.1)}.legend-section .legend-content .legend-text .doodle-text{font-size:clamp(20px,2.5vw,26px);color:#333;line-height:1.8;max-width:700px;margin-bottom:20px;transform:rotate(.3deg)}.legend-section .legend-content .legend-text .doodle-text.punchline{font-size:clamp(24px,3vw,32px);font-weight:700;color:#000;transform:rotate(-.4deg);margin-top:25px;padding:15px;background:rgba(255,255,255,.8);border-left:5px solid #000;border-radius:4px;animation:punchlinePulse 3s ease-in-out infinite}.legend-section .legend-content .legend-text .doodle-text.punchline:hover{animation:punchlineShake .5s ease-in-out}.legend-section .legend-content .legend-text .doodle-text .highlight{font-weight:700;color:#000;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;background:rgba(255,255,0,.3);padding:2px 4px;animation:highlightFlash 2s ease-in-out infinite;display:inline-block}.legend-section .legend-content .avatar-container{position:relative;display:inline-block;flex-shrink:0}.legend-section .legend-content .avatar-container .avatar-image{width:250px;height:250px;border:6px solid #000;border-radius:12px;background:#fff;padding:15px;transform:rotate(-3deg);box-shadow:12px 12px #0003,inset 0 0 0 4px #fff9;filter:drop-shadow(4px 4px 8px rgba(0,0,0,.15));transition:transform .4s ease;object-fit:contain;animation:avatarFloat 4s ease-in-out infinite}.legend-section .legend-content .avatar-container .avatar-image:hover{transform:rotate(3deg) scale(1.08);animation:avatarSpin .6s ease-in-out}.legend-section .legend-content .avatar-container .avatar-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:270px;height:270px;border:3px dashed #000;border-radius:12px;opacity:.4;animation:pulse 2.5s ease-in-out infinite}.meme-section{margin-bottom:80px;padding:50px 40px;background:rgba(255,255,255,.7);border:5px solid #000;border-radius:16px;transform:rotate(-.4deg);box-shadow:10px 10px #0000001f,inset 0 0 0 3px #ffffffe6;position:relative;z-index:10;animation:memeWiggle 10s ease-in-out infinite}.meme-section:before{content:"🎨";position:absolute;top:-25px;left:40px;font-size:50px;transform:rotate(-25deg);animation:iconFloat 4s ease-in-out infinite;z-index:11}.meme-section:after{content:"📈";position:absolute;top:-25px;right:40px;font-size:50px;transform:rotate(25deg);animation:iconFloat 4s ease-in-out infinite 2s;z-index:11}.meme-section .meme-header{text-align:center;margin-bottom:40px}.meme-section .meme-header .section-title{font-family:Caveat,cursive;font-size:clamp(42px,6vw,64px);font-weight:700;color:#000;margin-bottom:15px;transform:rotate(.6deg);text-shadow:3px 3px 0px rgba(0,0,0,.1)}.meme-section .meme-header .meme-subtitle{font-size:clamp(18px,2.2vw,24px);color:#666;font-style:italic;transform:rotate(-.3deg)}.meme-section .meme-container{text-align:center}.meme-section .meme-container .meme-image{max-width:70%;width:auto;height:auto;border:6px solid #000;border-radius:12px;background:#fff;padding:20px;transform:rotate(1.2deg);box-shadow:14px 14px #0000002e,inset 0 0 0 4px #fff9;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.15));margin-bottom:35px;transition:transform .4s ease;object-fit:contain;animation:imageFloat 5s ease-in-out infinite}.meme-section .meme-container .meme-image:hover{transform:rotate(-1deg) scale(1.02);animation:imageWiggle .5s ease-in-out}.meme-section .meme-container .meme-caption{max-width:800px;margin:0 auto;padding:25px;background:rgba(255,255,255,.9);border:4px solid #000;border-radius:10px;transform:rotate(-.5deg);box-shadow:8px 8px #0000001a}.meme-section .meme-container .meme-caption .caption-text{font-size:clamp(20px,2.5vw,28px);color:#333;line-height:1.8;margin-bottom:15px;transform:rotate(.2deg)}.meme-section .meme-container .meme-caption .caption-text.highlight-text{font-size:clamp(24px,3vw,32px);font-weight:700;color:#000;transform:rotate(-.4deg);margin-top:10px;animation:highlightTextPulse 2.5s ease-in-out infinite}.meme-section .meme-container .meme-caption .caption-text.highlight-text:hover{animation:highlightTextShake .4s ease-in-out}.philosophy-section{margin-bottom:60px;padding:50px 40px;position:relative;z-index:10}.philosophy-section .section-title{font-family:Caveat,cursive;font-size:clamp(42px,6vw,64px);font-weight:700;color:#000;text-align:center;margin-bottom:50px;transform:rotate(-.5deg);text-shadow:3px 3px 0px rgba(0,0,0,.1)}.philosophy-section .philosophy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:0 auto}.philosophy-section .philosophy-grid .philosophy-card{padding:35px 25px;background:rgba(255,255,255,.8);border:4px solid #000;border-radius:12px;text-align:center;transform:rotate(0);box-shadow:8px 8px #0000001a,inset 0 0 0 2px #ffffffe6;transition:all .3s ease}.philosophy-section .philosophy-grid .philosophy-card:nth-child(1){transform:rotate(-1deg)}.philosophy-section .philosophy-grid .philosophy-card:nth-child(2){transform:rotate(.5deg)}.philosophy-section .philosophy-grid .philosophy-card:nth-child(3){transform:rotate(-.5deg)}.philosophy-section .philosophy-grid .philosophy-card:hover{transform:rotate(0) translateY(-5px) scale(1.03);box-shadow:12px 12px #00000026,inset 0 0 0 2px #ffffffe6}.philosophy-section .philosophy-grid .philosophy-card .card-icon{font-size:60px;margin-bottom:20px;animation:iconFloat 3s ease-in-out infinite;display:inline-block}.philosophy-section .philosophy-grid .philosophy-card .card-icon:hover{animation:iconSpin .8s ease-in-out}.philosophy-section .philosophy-grid .philosophy-card .card-title{font-family:Caveat,cursive;font-size:clamp(28px,3vw,36px);font-weight:700;color:#000;margin-bottom:15px;text-shadow:2px 2px 0px rgba(0,0,0,.1)}.philosophy-section .philosophy-grid .philosophy-card .card-text{font-size:clamp(16px,2vw,20px);color:#333;line-height:1.6}.rules-section{margin-bottom:80px;padding:50px 40px;background:rgba(255,255,255,.7);border:5px solid #000;border-radius:16px;transform:rotate(.3deg);box-shadow:10px 10px #0000001f,inset 0 0 0 3px #ffffffe6;position:relative;z-index:10;animation:wiggle 9s ease-in-out infinite}.rules-section .section-title{font-family:Caveat,cursive;font-size:clamp(42px,6vw,64px);font-weight:700;color:#000;text-align:center;margin-bottom:15px;transform:rotate(-.3deg);text-shadow:3px 3px 0px rgba(0,0,0,.1)}.rules-section .rules-subtitle{text-align:center;font-size:clamp(18px,2.2vw,24px);color:#666;font-style:italic;margin-bottom:40px;transform:rotate(.2deg)}.rules-section .rules-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:25px}.rules-section .rules-list .rule-item{display:flex;gap:20px;padding:25px;background:rgba(255,255,255,.9);border:4px solid #000;border-radius:12px;transform:rotate(0);box-shadow:6px 6px #0000001a,inset 0 0 0 2px #ffffffe6;transition:all .3s ease;animation:ruleFloat 6s ease-in-out infinite}.rules-section .rules-list .rule-item:nth-child(1){transform:rotate(-.5deg);animation-delay:0s}.rules-section .rules-list .rule-item:nth-child(2){transform:rotate(.4deg);animation-delay:1s}.rules-section .rules-list .rule-item:nth-child(3){transform:rotate(-.3deg);animation-delay:2s}.rules-section .rules-list .rule-item:nth-child(4){transform:rotate(.5deg);animation-delay:3s}.rules-section .rules-list .rule-item:nth-child(5){transform:rotate(-.4deg);animation-delay:4s}.rules-section .rules-list .rule-item:hover{transform:rotate(0) translateY(-3px) scale(1.02);box-shadow:8px 8px #00000026,inset 0 0 0 2px #ffffffe6}.rules-section .rules-list .rule-item .rule-number{flex-shrink:0;width:60px;height:60px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Caveat,cursive;font-size:clamp(32px,4vw,40px);font-weight:700;box-shadow:4px 4px #0003;animation:numberPulse 2s ease-in-out infinite}.rules-section .rules-list .rule-item .rule-content{flex:1}.rules-section .rules-list .rule-item .rule-content .rule-title{font-family:Caveat,cursive;font-size:clamp(24px,3vw,32px);font-weight:700;color:#000;margin-bottom:10px;text-shadow:2px 2px 0px rgba(0,0,0,.1)}.rules-section .rules-list .rule-item .rule-content .rule-text{font-size:clamp(16px,2vw,20px);color:#333;line-height:1.6}.footer{width:100%;text-align:center;padding:40px 20px;border-top:4px dashed #000;margin-top:60px;background:rgba(255,255,255,.5);position:relative;z-index:10;animation:footerWiggle 12s ease-in-out infinite}.footer .footer-text{font-size:clamp(18px,2.2vw,24px);color:#000;font-weight:600;transform:rotate(-.2deg);margin-bottom:10px}.footer .footer-disclaimer{font-size:clamp(14px,1.8vw,18px);color:#666;font-style:italic;transform:rotate(.2deg)}.doodle-decoration{position:fixed;font-size:50px;opacity:.12;pointer-events:none;z-index:0}.doodle-decoration.doodle-1{top:8%;left:3%;animation:float1 12s ease-in-out infinite;animation-delay:0s}.doodle-decoration.doodle-2{top:25%;right:5%;animation:float2 10s ease-in-out infinite;animation-delay:1s}.doodle-decoration.doodle-3{bottom:30%;left:8%;animation:float3 14s ease-in-out infinite;animation-delay:2s}.doodle-decoration.doodle-4{bottom:12%;right:3%;animation:float4 11s ease-in-out infinite;animation-delay:3s}.doodle-decoration.doodle-5{top:15%;left:15%;animation:float1 13s ease-in-out infinite;animation-delay:4s}.doodle-decoration.doodle-6{top:45%;right:12%;animation:float2 9s ease-in-out infinite;animation-delay:5s}.doodle-decoration.doodle-7{bottom:45%;left:20%;animation:float3 15s ease-in-out infinite;animation-delay:6s}.doodle-decoration.doodle-8{top:60%;right:20%;animation:float4 11s ease-in-out infinite;animation-delay:7s}.doodle-decoration.doodle-9{top:35%;left:5%;animation:float1 12s ease-in-out infinite;animation-delay:8s}.doodle-decoration.doodle-10{bottom:20%;right:15%;animation:float2 10s ease-in-out infinite;animation-delay:9s}@keyframes pulse{0%,to{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.15)}}@keyframes float1{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(20px,-30px) rotate(15deg)}50%{transform:translate(-15px,-50px) rotate(-10deg)}75%{transform:translate(25px,-20px) rotate(12deg)}}@keyframes float2{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-25px,-35px) rotate(-12deg)}50%{transform:translate(18px,-45px) rotate(18deg)}75%{transform:translate(-20px,-25px) rotate(-8deg)}}@keyframes float3{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-40px) rotate(20deg)}66%{transform:translate(-25px,-35px) rotate(-15deg)}}@keyframes float4{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-20px,-25px) rotate(-18deg)}50%{transform:translate(22px,-55px) rotate(22deg)}75%{transform:translate(-18px,-30px) rotate(-10deg)}}@keyframes wiggle{0%,to{transform:rotate(.4deg) translateY(0)}25%{transform:rotate(.6deg) translateY(-2px)}50%{transform:rotate(.2deg) translateY(2px)}75%{transform:rotate(.5deg) translateY(-1px)}}@keyframes bounce{0%,to{transform:translateY(0) rotate(.4deg)}50%{transform:translateY(-10px) rotate(.6deg)}}@keyframes titleWiggle{0%,to{transform:rotate(-.6deg) scale(1)}25%{transform:rotate(-.8deg) scale(1.01)}50%{transform:rotate(-.4deg) scale(1)}75%{transform:rotate(-.7deg) scale(1.01)}}@keyframes titleBounce{0%,to{transform:rotate(-.6deg) scale(1)}50%{transform:rotate(-1deg) scale(1.1)}}@keyframes punchlinePulse{0%,to{transform:rotate(-.4deg) scale(1);box-shadow:0 0 #0000}50%{transform:rotate(-.3deg) scale(1.02);box-shadow:0 0 15px #0000001a}}@keyframes punchlineShake{0%,to{transform:rotate(-.4deg) translate(0)}25%{transform:rotate(-.6deg) translate(-5px)}75%{transform:rotate(-.2deg) translate(5px)}}@keyframes highlightFlash{0%,to{background:rgba(255,255,0,.3);transform:scale(1)}50%{background:rgba(255,255,0,.6);transform:scale(1.05)}}@keyframes avatarFloat{0%,to{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}@keyframes avatarSpin{0%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(360deg) scale(1.1)}to{transform:rotate(357deg) scale(1.08)}}@keyframes memeWiggle{0%,to{transform:rotate(-.4deg) translateY(0)}25%{transform:rotate(-.6deg) translateY(-3px)}50%{transform:rotate(-.2deg) translateY(3px)}75%{transform:rotate(-.5deg) translateY(-2px)}}@keyframes memeBounce{0%,to{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-8px) rotate(-.6deg)}}@keyframes imageFloat{0%,to{transform:rotate(1.2deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}@keyframes imageWiggle{0%,to{transform:rotate(-1deg) scale(1.02)}25%{transform:rotate(-1.5deg) scale(1.03)}75%{transform:rotate(-.5deg) scale(1.03)}}@keyframes highlightTextPulse{0%,to{transform:rotate(-.4deg) scale(1)}50%{transform:rotate(-.3deg) scale(1.05)}}@keyframes highlightTextShake{0%,to{transform:rotate(-.4deg) translate(0)}25%{transform:rotate(-.6deg) translate(-3px)}75%{transform:rotate(-.2deg) translate(3px)}}@keyframes iconFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}@keyframes iconSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}@keyframes footerWiggle{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes ruleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes numberPulse{0%,to{transform:scale(1);box-shadow:4px 4px #0003}50%{transform:scale(1.1);box-shadow:6px 6px #00000040}}@media (max-width: 968px){.hero:after{height:30px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.5) 100%)}.legend-section,.meme-section,.philosophy-section,.rules-section{padding:35px 20px;margin-bottom:50px}.rules-section .rules-list .rule-item{flex-direction:column;text-align:center;gap:15px}.rules-section .rules-list .rule-item .rule-number{margin:0 auto}.legend-section .legend-content .avatar-container .avatar-image{width:200px;height:200px}.philosophy-grid{grid-template-columns:1fr}.doodle-decoration{font-size:35px}}@media (max-width: 640px){.legend-section,.meme-section,.philosophy-section{padding:25px 15px}.legend-section .legend-content .avatar-container .avatar-image{width:180px;height:180px}}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}#root{width:100%;min-height:100vh}
