:root{--color-primary: #2875B8;--color-primary-dark: #205784;--color-primary-soft: #E8F3FF;--color-background: #FFF9EF;--color-surface: #FFFFFF;--color-surface-muted: #F6F1E7;--color-text: #344256;--color-text-muted: #718096;--color-success: #3E9568;--color-success-soft: #E5F5EA;--color-warning: #FFC857;--color-warning-soft: #FFF5DD;--color-coral: #E9816F;--color-coral-soft: #FCEAE5;--color-lavender: #8D80C9;--color-lavender-soft: #F0ECFB;--color-border: #E8E2D8;--color-focus: #175D9B;--font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Fredoka", "Nunito", cursive, sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--space-4xl: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(48, 60, 74, .05);--shadow-md: 0 4px 12px rgba(48, 60, 74, .08);--shadow-lg: 0 8px 24px rgba(48, 60, 74, .12);--shadow-button: 0 4px 0 var(--color-primary-dark)}@keyframes floatGentle{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes cloudDrift{0%{transform:translate(0)}50%{transform:translate(16px)}to{transform:translate(0)}}@keyframes treeSway{0%,to{transform:rotate(0)}50%{transform:rotate(1.5deg)}}@keyframes flagWave{0%,to{transform:skewY(0) scaleX(1)}50%{transform:skewY(-3.5deg) scaleX(.96)}}@keyframes boatRock{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}@keyframes smokePuff{0%{transform:translateY(0) scale(.9);opacity:.7}50%{transform:translateY(-7px) scale(1.2);opacity:.4}to{transform:translateY(-14px) scale(1.5);opacity:0}}@keyframes streamShimmer{0%{stroke-dashoffset:0}to{stroke-dashoffset:-28}}@keyframes mascotBreathe{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.01)}}@keyframes mascotBlink{0%,94%,98%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}@keyframes mascotEarWiggle{0%,85%,to{transform:rotate(0)}90%{transform:rotate(3deg)}95%{transform:rotate(-3deg)}}@keyframes mascotCheerJump{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(2px) scale(1.05,.95)}50%{transform:translateY(-12px) scale(.96,1.04)}70%{transform:translateY(0) scale(1.03,.97)}85%{transform:translateY(-3px) scale(1)}}@keyframes mascotWave{0%,to{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}}@keyframes starTwinkle{0%,to{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.2) rotate(12deg);opacity:1;filter:drop-shadow(0 0 6px rgba(255,200,87,.75))}}@keyframes starBurst{0%{transform:scale(.3) rotate(-30deg);opacity:0}60%{transform:scale(1.25) rotate(10deg);opacity:1;filter:drop-shadow(0 0 10px rgba(255,200,87,.9))}to{transform:scale(1) rotate(0);opacity:1}}@keyframes medalGlow{0%,to{filter:drop-shadow(0 0 4px rgba(255,193,7,.4))}50%{filter:drop-shadow(0 0 12px rgba(255,193,7,.8))}}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0) scale(.8);opacity:1}to{transform:translateY(120px) rotate(360deg) scale(1);opacity:0}}@keyframes pulsePill{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes popIn{0%{transform:scale(.92);opacity:0}70%{transform:scale(1.02);opacity:1}to{transform:scale(1);opacity:1}}@keyframes slideUpFade{0%{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDownFade{0%{transform:translateY(-14px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes dropdownFadeScale{0%{transform:scale(.94) translateY(-8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes drawerSlideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes badgeGleam{0%{transform:translate(-100%) rotate(25deg)}to{transform:translate(200%) rotate(25deg)}}.anim-float{animation:floatGentle 3.2s ease-in-out infinite}.anim-cloud{animation:cloudDrift 8s ease-in-out infinite}.anim-tree-sway{animation:treeSway 4s ease-in-out infinite;transform-origin:center bottom}.anim-flag{animation:flagWave 2.4s ease-in-out infinite;transform-origin:left center}.anim-boat{animation:boatRock 3.6s ease-in-out infinite;transform-origin:center bottom}.anim-smoke{animation:smokePuff 2.8s ease-out infinite}.anim-stream{animation:streamShimmer 1.8s linear infinite}.anim-mascot-idle{animation:mascotBreathe 3.4s ease-in-out infinite}.anim-mascot-blink{animation:mascotBlink 3.8s ease-in-out infinite;transform-origin:center}.anim-mascot-ear{animation:mascotEarWiggle 4.6s ease-in-out infinite;transform-origin:bottom center}.anim-mascot-cheer{animation:mascotCheerJump .65s cubic-bezier(.34,1.56,.64,1) forwards}.anim-mascot-wave{animation:mascotWave 2.2s ease-in-out infinite;transform-origin:bottom right}.anim-star-twinkle{animation:starTwinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.anim-star-burst{animation:starBurst .6s cubic-bezier(.34,1.56,.64,1) forwards}.anim-medal-glow{animation:medalGlow 2.5s ease-in-out infinite}.anim-pulse-subtle{animation:pulsePill 2.2s ease-in-out infinite}.anim-pop{animation:popIn .35s cubic-bezier(.34,1.56,.64,1) forwards}.anim-drawer{animation:drawerSlideIn .28s cubic-bezier(.16,1,.3,1) forwards}.anim-slide-up{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) forwards}.anim-slide-down{animation:slideDownFade .35s cubic-bezier(.16,1,.3,1) forwards}.stagger-1{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) .05s both}.stagger-2{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) .12s both}.stagger-3{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) .19s both}.stagger-4{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) .26s both}.stagger-5{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) .33s both}.stagger-6{animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) .4s both}.interactive-card{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .2s ease}.interactive-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #303c4a1a}.interactive-card:active{transform:translateY(-1px)}.interactive-badge{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.interactive-badge:hover{transform:scale(1.05)}.interactive-choice-btn{transition:all .18s cubic-bezier(.34,1.56,.64,1)}.interactive-choice-btn:hover{transform:translate(4px)}.interactive-choice-btn:active{transform:scale(.98)}.badge-gleam-container{position:relative;overflow:hidden}.badge-gleam-container:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(60deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translate(-100%);pointer-events:none}.badge-gleam-container:hover:after{animation:badgeGleam .85s ease-out}@keyframes heroBimoIdle{0%,to{transform:translateY(0)}50%{transform:translateY(-2.2px)}}@keyframes heroMimiIdle{0%,to{transform:translateY(0)}50%{transform:translateY(-2.5px)}}@keyframes heroKikoIdle{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes heroBimoEars{0%,88%,to{transform:rotate(0)}92%{transform:rotate(2.5deg)}96%{transform:rotate(-2.5deg)}}@keyframes heroBimoWave{0%,to{transform:rotate(0)}30%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}@keyframes heroBimoBlink{0%,94%,98%,to{transform:scaleY(1)}96%{transform:scaleY(.12)}}@keyframes heroMimiEars{0%,84%,to{transform:rotate(0)}88%{transform:rotate(-3.5deg)}92%{transform:rotate(3.5deg)}96%{transform:rotate(0)}}@keyframes heroMimiBlink{0%,94%,98%,to{transform:scaleY(1)}96%{transform:scaleY(.12)}}@keyframes heroKikoTail{0%,to{transform:rotate(0)}50%{transform:rotate(-3.5deg)}}@keyframes heroKikoEars{0%,86%,to{transform:rotate(0)}90%{transform:rotate(-2.5deg)}95%{transform:rotate(2.5deg)}}@keyframes heroKikoBlink{0%,94%,98%,to{transform:scaleY(1)}96%{transform:scaleY(.12)}}@keyframes heroCloudDrift1{0%,to{transform:translate(0)}50%{transform:translate(10px)}}@keyframes heroCloudDrift2{0%,to{transform:translate(0)}50%{transform:translate(-8px)}}@keyframes heroTreeSway{0%,to{transform:rotate(0)}50%{transform:rotate(1.4deg)}}@keyframes heroStarTwinkle{0%,to{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.15) rotate(15deg);opacity:1;filter:drop-shadow(0 0 5px rgba(255,200,87,.7))}}@keyframes heroBirdPerch{0%,88%,to{transform:translateY(0)}92%{transform:translateY(-2.8px)}96%{transform:translateY(0)}}@keyframes heroCrystalPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 2px rgba(255,200,87,.4))}50%{transform:scale(1.08);filter:drop-shadow(0 0 7px rgba(255,200,87,.85))}}.hero-mascot-bimo{animation:heroBimoIdle 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}.hero-bimo-ears{animation:heroBimoEars 5.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}.hero-bimo-wave{animation:heroBimoWave 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}.hero-bimo-blink{animation:heroBimoBlink 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}.hero-mascot-mimi{animation:heroMimiIdle 3.4s ease-in-out infinite;animation-delay:.5s;transform-box:fill-box;transform-origin:bottom center}.hero-mimi-ears{animation:heroMimiEars 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}.hero-mimi-blink{animation:heroMimiBlink 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}.hero-crystal-pulse{animation:heroCrystalPulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}.hero-mascot-kiko{animation:heroKikoIdle 3.8s ease-in-out infinite;animation-delay:1.1s;transform-box:fill-box;transform-origin:bottom center}.hero-kiko-tail{animation:heroKikoTail 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:75% 85%}.hero-kiko-ears{animation:heroKikoEars 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}.hero-kiko-blink{animation:heroKikoBlink 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}.hero-cloud-drift-1{animation:heroCloudDrift1 14s ease-in-out infinite}.hero-cloud-drift-2{animation:heroCloudDrift2 16s ease-in-out infinite}.hero-tree-sway{animation:heroTreeSway 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}.hero-star-twinkle{animation:heroStarTwinkle 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}.hero-bird-perch{animation:heroBirdPerch 6.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}.adventure-gate-scene{transition:filter 1.2s ease}.adventure-gate-scene svg stop,.adventure-gate-scene svg path,.adventure-gate-scene svg circle,.adventure-gate-scene svg rect{transition:fill 1.2s ease,stroke 1.2s ease,stop-color 1.2s ease,opacity 1.2s ease}@keyframes heroMoonGlow{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}.hero-moon-glow{animation:heroMoonGlow 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}@keyframes heroNightStarTwinkle{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}.hero-night-star{animation:heroNightStarTwinkle 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}@keyframes heroLanternFlicker{0%,to{opacity:.88;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}.hero-lantern-light{animation:heroLanternFlicker 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}@keyframes heroDistantBirdFlight{0%{transform:translate(0);opacity:0}10%{opacity:.7}90%{opacity:.7}to{transform:translate(60px,-12px);opacity:0}}.hero-distant-birds{animation:heroDistantBirdFlight 20s linear infinite}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-text);line-height:1.6;min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;color:var(--color-text);line-height:1.25}h1{font-size:clamp(1.8rem,4vw,2.4rem)}h2{font-size:clamp(1.4rem,3vw,1.85rem)}h3{font-size:1.25rem}p{color:var(--color-text);font-size:1rem}a{color:var(--color-primary);text-decoration:none;transition:color .2s ease}a:hover{color:var(--color-primary-dark)}button{font-family:inherit;cursor:pointer;border:none;background:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}img,svg{max-width:100%;display:block}.container{width:100%;max-width:1140px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.page-wrapper{display:flex;flex-direction:column;min-height:100vh}.page-content{flex:1 0 auto;padding-top:var(--space-xl);padding-bottom:var(--space-4xl)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-display);font-weight:600;font-size:1rem;padding:10px 20px;border-radius:var(--radius-md);transition:all .15s ease;-webkit-user-select:none;user-select:none;text-decoration:none}.btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:0 4px 0 var(--color-primary-dark)}.btn-primary:hover{background-color:#3b88c4;color:#fff;transform:translateY(-1px);box-shadow:0 5px 0 var(--color-primary-dark)}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-primary-dark)}.btn-secondary{background-color:var(--color-surface);color:var(--color-primary-dark);border:2px solid var(--color-border);box-shadow:0 4px 0 var(--color-border)}.btn-secondary:hover{background-color:var(--color-primary-soft);border-color:var(--color-primary);box-shadow:0 4px 0 var(--color-primary)}.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-border)}.btn-success{background-color:var(--color-success);color:#fff;box-shadow:0 4px #286948}.btn-success:hover{background-color:#48a675;box-shadow:0 5px #286948}.btn-success:active{transform:translateY(3px);box-shadow:0 1px #286948}.btn-warning{background-color:var(--color-warning);color:#4a3810;box-shadow:0 4px #b38b2d}.btn-warning:hover{background-color:#f0c35e}.btn-warning:active{transform:translateY(3px);box-shadow:0 1px #b38b2d}.btn-coral{background-color:var(--color-coral);color:#fff;box-shadow:0 4px #c25f4e}.btn-coral:hover{background-color:#f18f7f}.btn-coral:active{transform:translateY(3px);box-shadow:0 1px #c25f4e}.btn-next-challenge{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:14px 24px;background-color:var(--color-primary);color:#fff;font-family:var(--font-body);font-weight:800;font-size:1.05rem;border:none;border-radius:var(--radius-md);box-shadow:0 4px 0 var(--color-primary-dark),0 6px 14px #2875b838;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.btn-next-challenge:hover{background-color:#3187d3;color:#fff;transform:translateY(-1px);box-shadow:0 5px 0 var(--color-primary-dark),0 8px 18px #2875b847}.btn-next-challenge:hover .btn-next-icon{transform:translate(4px)}.btn-next-challenge:active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-primary-dark),0 2px 6px #2875b826}.btn-next-challenge:focus-visible{outline:3px solid #FFC857;outline-offset:3px}.btn-next-challenge:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--color-primary-dark)}.btn-next-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.avatar-clean-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:transparent;border:none;border-radius:50%;cursor:pointer;transition:opacity .18s ease,transform .18s ease;-webkit-user-select:none;user-select:none;line-height:0}.avatar-clean-btn:hover{opacity:.9;transform:scale(1.03)}.avatar-clean-btn:active{transform:scale(.97)}.avatar-clean-btn:focus-visible{outline:3px solid #2875B8;outline-offset:3px;border-radius:50%}.profile-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;width:250px;background-color:#fff;border:1.5px solid #E8E2D8;border-radius:18px;box-shadow:0 10px 32px #303c4a1f,0 2px 6px #303c4a0d;z-index:1000;overflow:hidden;padding:0 0 6px}.profile-card-header{padding:14px 16px 12px;border-bottom:1.5px solid #E8E2D8;background:linear-gradient(135deg,#fffdf8,#f5f9ff)}.profile-card-user-row{display:flex;align-items:center;gap:12px}.profile-avatar-circle{width:46px;height:46px;border-radius:50%;border:2px solid #2875B8;background-color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px #2875b81f}.profile-card-stats{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:6px 12px;background-color:#fff;border-radius:12px;border:1px solid #E8E2D8}.profile-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;color:#344256;text-decoration:none;font-size:.92rem;font-weight:700;font-family:var(--font-body);background-color:transparent;border:none;cursor:pointer;text-align:left;transition:background-color .18s ease,color .18s ease}.profile-menu-item:hover{background-color:#f0f7ff;color:#205784}.profile-menu-item:hover .profile-menu-icon{transform:translate(2px);color:#2875b8}.profile-menu-item:focus-visible{outline:2px solid #2875B8;outline-offset:-2px;background-color:#f0f7ff}.profile-menu-icon{display:inline-flex;align-items:center;justify-content:center;color:#718096;flex-shrink:0;transition:transform .18s ease,color .18s ease}.profile-menu-divider{height:1px;background-color:#e8e2d8;margin:4px 0}.profile-menu-item.logout{color:#d9534f}.profile-menu-item.logout:hover{background-color:#fff2f0;color:#c9302c}.profile-menu-item.logout .profile-menu-icon{color:#d9534f}.profile-menu-item.logout:hover .profile-menu-icon{color:#c9302c}.btn-sm{padding:6px 14px;font-size:.9rem;border-radius:var(--radius-sm)}.btn-lg{padding:14px 28px;font-size:1.15rem;border-radius:var(--radius-lg)}.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none;box-shadow:none}.card-panel{background-color:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm)}.tag-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);font-size:.85rem;font-weight:700;font-family:var(--font-body)}.tag-badge-primary{background-color:var(--color-primary-soft);color:var(--color-primary-dark);border:1px solid #c7e1f7}.tag-badge-warning{background-color:var(--color-warning-soft);color:#8c6812;border:1px solid #f6e19f}.tag-badge-success{background-color:var(--color-success-soft);color:#216a44;border:1px solid #c2ebcb}.tag-badge-coral{background-color:var(--color-coral-soft);color:#b24a38;border:1px solid #fad2c9}.tag-badge-lavender{background-color:var(--color-lavender-soft);color:#5c4ea8;border:1px solid #ddd7f5}.tag-badge-secondary{background-color:#f1f5f9;color:#475569;border:1px solid #CBD5E1}.flex-center{display:flex;align-items:center;justify-content:center}.text-muted{color:var(--color-text-muted)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#1f293761;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:99999;animation:modalOverlayFade .2s ease-out}.modal-dialog-box{width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background-color:#fff;border-radius:22px;border:2px solid #E8E2D8;box-shadow:0 16px 36px -6px #20578429,0 6px 16px #303c4a14;padding:24px;overflow-y:auto;outline:none;position:relative;animation:modalSlideIn .22s cubic-bezier(.16,1,.3,1)}.modal-close-btn{width:36px;height:36px;border-radius:10px;background-color:#fff9ef;border:1.5px solid #E8E2D8;color:#4a5568;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;flex-shrink:0}.modal-close-btn:hover{background-color:#fceae5;border-color:#f4b3a8;color:#c25f4e}.modal-close-btn:focus-visible{outline:2px solid #2875B8;outline-offset:2px}@keyframes modalOverlayFade{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.modal-overlay,.modal-dialog-box{animation:none!important}}.char-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;width:100%}.char-select-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 10px 14px;border-radius:18px;background-color:#fff;border:2px solid #E8E2D8;box-shadow:0 3px 8px #303c4a0a;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;outline:none;width:100%;min-height:142px}.char-select-card:hover{background-color:#fffdf9;border-color:#dbd3c5;box-shadow:0 6px 14px #303c4a12}.char-select-card:hover .char-avatar-inner{transform:translateY(-3px)}.char-select-card.is-selected{background-color:#fffcf5;border:2px solid #E5C362;box-shadow:0 6px 18px #e5c36233,0 2px 6px #303c4a0d}.char-select-card:focus-visible{outline:2.5px solid #2875B8;outline-offset:3px}.char-select-card:focus:not(:focus-visible){outline:none}.char-check-badge{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background-color:#e5a823;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #e5a82359;animation:charBadgePop .2s cubic-bezier(.16,1,.3,1);z-index:2}@keyframes charBadgePop{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.char-avatar-inner{transition:transform .22s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center}.char-card-anim-1{animation:charCardEntrance .35s ease-out .03s both}.char-card-anim-2{animation:charCardEntrance .35s ease-out .07s both}.char-card-anim-3{animation:charCardEntrance .35s ease-out .11s both}.char-card-anim-4{animation:charCardEntrance .35s ease-out .15s both}.char-card-anim-5{animation:charCardEntrance .35s ease-out .19s both}@keyframes charCardEntrance{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.char-select-card,.char-avatar-inner,.char-check-badge,.char-card-anim-1,.char-card-anim-2,.char-card-anim-3,.char-card-anim-4,.char-card-anim-5{animation:none!important;transition:none!important}}