:root{--ink:#25324d;--muted:#8b94a5;--line:#e9edf2;--bg:#f7f8f4;--purple:#7758ef;--purple-dark:#6140dc;--soft-purple:#eeeaff;--yellow:#ffd465;--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffbd51;outline-offset:3px}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:242px;background:#fff;border-right:1px solid var(--line);padding:30px 18px 18px;display:flex;flex-direction:column;flex:none;min-height:100vh;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:0 12px;text-decoration:none;color:#27314b;font-family:Fredoka,sans-serif;font-weight:600;font-size:23px;letter-spacing:-1.3px}
.brand-mark{display:inline-grid;place-items:center;width:29px;height:29px;background:#805cf2;color:white;border-radius:10px;transform:rotate(-12deg);font-size:21px}
.brand-dot{color:#8565ed}
.nav-label{margin:58px 13px 14px;color:#a5acba;font-size:10px;font-weight:800;letter-spacing:2px}
.nav-list{display:grid;gap:7px}
.nav-item{border:0;background:none;color:#788295;display:flex;align-items:center;gap:14px;width:100%;padding:12px 13px;border-radius:12px;text-align:left;font-size:13px;font-weight:700}
.nav-item:hover{background:#f8f6ff}
.nav-item.active{background:#f0ecff;color:#704ee7}
.nav-icon{font-family:Fredoka,sans-serif;font-size:22px;line-height:1;width:23px;text-align:center;font-weight:500}
.nav-arrow{margin-left:auto;font-size:23px;line-height:0}
.nav-pill{margin-left:auto;background:#e6defe;color:#7855ed;border-radius:20px;padding:2px 7px;font-size:10px}
.sidebar-bottom{margin-top:auto;background:#f5f1ff;border-radius:17px;padding:18px 16px 15px;position:relative;overflow:hidden}
.side-icon{font-size:35px;color:#9b79ef;margin-bottom:5px}
.sidebar-bottom strong{font:600 15px Fredoka,sans-serif}
.sidebar-bottom p{font-size:11px;line-height:1.5;color:#9291a7;margin:6px 0 0}
.sidebar-footer{font-size:10px;color:#b2b9c4;text-align:center;margin-top:24px}
.main-wrap{flex:1;min-width:0}
.topbar{height:71px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 47px}
.breadcrumb{font-size:10px;color:#a9b1bd;letter-spacing:1.7px;font-weight:800}
.breadcrumb span{padding:0 7px}
.breadcrumb span:last-child{color:#7c65d8}
.top-actions{display:flex;align-items:center;gap:25px}
.streak-badge{font-size:11px;color:#b88730;background:#fff7df;border:1px solid #ffeac0;border-radius:20px;padding:8px 12px;font-weight:800}
.profile-button{border:0;background:transparent;display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;color:#4d5870}
.avatar{width:30px;height:30px;border-radius:50%;background:#f6deaf;display:grid;place-items:center;color:#815220;font-size:19px}
.chevron{color:#aab3c0}
.mobile-menu{display:none}
.page{max-width:1360px;margin:auto;padding:33px 47px 65px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#9aa3b0}
.page-title{font:600 34px/1.16 Fredoka,sans-serif;letter-spacing:-.6px;margin:8px 0 8px}
.page-subtitle{color:#8993a3;font-size:13px;margin:0 0 26px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:25px}
.hero{background:#eae4ff;border-radius:25px;min-height:198px;padding:31px 35px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.hero:before,.hero:after{content:'';position:absolute;border-radius:50%;border:2px solid #ded3ff}
.hero:before{width:280px;height:280px;right:-25px;top:-115px}
.hero:after{width:155px;height:155px;right:115px;bottom:-110px}
.hero-copy{position:relative;z-index:1;max-width:470px}
.hero-kicker{color:#7357ce;font-size:10px;font-weight:800;letter-spacing:1.5px}
.hero h2{font:600 31px/1.1 Fredoka,sans-serif;letter-spacing:-.5px;margin:10px 0 9px}
.hero p{font-size:12px;color:#77738e;line-height:1.6;margin:0 0 18px}
.primary-btn,.secondary-btn{border:0;border-radius:10px;padding:12px 17px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.primary-btn{background:var(--purple);color:white;box-shadow:0 5px 12px #7151d633}
.primary-btn:hover{background:var(--purple-dark)}
.secondary-btn{background:#fff;color:#6648d9;border:1px solid #e4dcff}
.hero-art{position:relative;z-index:1;width:195px;flex:none;transform:rotate(5deg);filter:drop-shadow(0 14px 14px #8672bc31)}
.hero-art svg{width:100%;height:auto}
.spark{position:absolute;color:#a68bfa;font-size:24px}
.spark.one{right:205px;top:26px}
.spark.two{right:24px;bottom:29px;font-size:18px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin:31px 0 15px}
.section-heading h2{font:600 21px Fredoka,sans-serif;margin:0}
.section-heading p{font-size:11px;color:#9ba3b0;margin:5px 0 0}
.link-button{border:0;background:none;color:#7458e9;font-size:11px;font-weight:800}
.world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.world-card{background:#fff;border:1px solid #edf0f3;border-radius:18px;padding:18px;box-shadow:0 5px 20px #27324c06;min-height:180px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.world-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #27324c10}
.world-top{display:flex;justify-content:space-between;align-items:start}
.world-icon{width:51px;height:51px;border-radius:15px;display:grid;place-items:center;font-size:29px}
.world-status{font-size:10px;color:#8e97a6;font-weight:800;background:#f6f7f9;padding:6px 9px;border-radius:14px}
.world-status.done{color:#3b9f81;background:#e8f8f2}
.world-card h3{font:600 18px Fredoka,sans-serif;margin:14px 0 3px}
.world-card p{font-size:11px;color:#9aa3b0;margin:0 0 15px}
.world-foot{display:flex;align-items:center;gap:9px;margin-top:auto}
.progress-track{height:6px;border-radius:8px;background:#eef0f5;overflow:hidden;flex:1}
.progress-fill{height:100%;border-radius:8px}
.world-foot span{font-size:10px;color:#8a95a6;font-weight:800}
.right-column{display:grid;align-content:start;gap:18px}
.stat-card,.collection-preview,.tip-card{background:white;border:1px solid #edf0f3;border-radius:19px;padding:20px}
.stat-card{padding:20px 22px}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-top h3,.collection-preview h3{font:600 17px Fredoka,sans-serif;margin:0}
.stat-icon{font-size:19px}
.stat-number{font:600 38px Fredoka,sans-serif;margin:12px 0 1px}
.stat-label{font-size:11px;color:#9ca5b3}
.stat-divider{height:1px;background:#eff0f4;margin:18px 0}
.mini-stats{display:flex;gap:10px}
.mini-stats>div{flex:1}
.mini-stats strong{font:600 19px Fredoka,sans-serif;display:block}
.mini-stats span{font-size:10px;color:#a0a8b4}
.collection-preview .heading-row{display:flex;justify-content:space-between;align-items:center}
.preview-cards{display:flex;margin:18px 0 13px;min-height:94px;align-items:center}
.preview-card{height:88px;width:68px;flex:none;border-radius:9px;border:4px solid white;box-shadow:0 4px 10px #25324d1c;overflow:hidden;background:#eee8ff;margin-right:-9px}
.preview-card svg{width:100%;height:100%}
.preview-empty{color:#a5adba;font-size:12px;line-height:1.5}
.collection-preview p{font-size:11px;color:#9ba4b2;margin:0;line-height:1.5}
.tip-card{background:#fff8e8;border-color:#ffeed1;display:flex;gap:12px;align-items:start}
.tip-card .tip-icon{font-size:23px}
.tip-card strong{font:600 14px Fredoka,sans-serif}
.tip-card p{font-size:10px;color:#a8916a;line-height:1.5;margin:4px 0 0}
.world-page .back-link,.game-page .back-link{border:0;background:none;padding:0;color:#7b62e7;font-size:12px;font-weight:800;margin-bottom:20px}
.world-header{border-radius:24px;padding:30px 32px;display:flex;align-items:center;gap:22px;margin-bottom:25px}
.world-header .world-icon{width:75px;height:75px;font-size:43px;background:#ffffff80}
.world-header .eyebrow{color:#655883}
.world-header h1{font:600 30px Fredoka,sans-serif;margin:4px 0}
.world-header p{font-size:12px;color:#777588;margin:0}
.stage-list{display:grid;gap:13px}
.stage-card{background:white;border:1px solid var(--line);border-radius:17px;padding:17px 19px;display:flex;align-items:center;gap:17px}
.stage-card.locked{opacity:.62}
.stage-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#f0eaff;color:#7458e9;font:600 21px Fredoka,sans-serif;flex:none}
.stage-info{flex:1}
.stage-info h3{font:600 17px Fredoka,sans-serif;margin:0 0 4px}
.stage-info p{font-size:11px;color:#9aa3af;margin:0}
.stage-stars{font-size:18px;color:#f4ba4b;letter-spacing:1px;min-width:69px}
.stage-stars.empty{color:#dfe3e9}
.stage-action{border:0;background:#7758ef;color:#fff;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:800;min-width:79px}
.stage-action:disabled{background:#edf0f4;color:#9ba4b1;cursor:not-allowed}
.game-page{max-width:850px}
.game-panel{background:#fff;border:1px solid var(--line);border-radius:25px;padding:28px;box-shadow:0 10px 35px #26324d0b}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:15px}
.game-header h2{font:600 23px Fredoka,sans-serif;margin:3px 0}
.game-counter{font-size:11px;color:#9ba4b1;font-weight:800}
.question-progress{display:flex;gap:6px;margin:19px 0 32px}
.question-progress span{height:7px;background:#edf0f4;flex:1;border-radius:6px}
.question-progress span.done{background:#8f75f2}
.question-progress span.current{background:#ffd064}
.question-kicker{text-align:center;color:#a8b0bd;font-size:11px;letter-spacing:1.5px;font-weight:800}
.question{font:600 clamp(38px,6vw,62px) Fredoka,sans-serif;text-align:center;margin:11px 0 29px;letter-spacing:2px}
.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:510px;margin:0 auto}
.answer-option{background:#f9fafc;border:2px solid #e9edf3;border-radius:16px;min-height:75px;font:600 29px Fredoka,sans-serif;color:#3d4a62}
.answer-option:hover:not(:disabled){background:#f2edff;border-color:#aa98f4}
.answer-option.correct{background:#e7f9ed;border-color:#55c586;color:#279559}
.answer-option.wrong{background:#fff0ec;border-color:#ec9b88;color:#d77359}
.answer-option:disabled{cursor:default}
.feedback{text-align:center;min-height:27px;margin-top:16px;font-size:13px;font-weight:800}
.feedback.good{color:#36a46f}
.feedback.try{color:#d4755d}
.game-footer{text-align:center;margin:18px 0 0;color:#a9b0bc;font-size:11px}
.result-panel{text-align:center;max-width:650px;margin:38px auto;background:white;border:1px solid var(--line);border-radius:25px;padding:35px}
.result-panel .big-stars{font-size:35px;letter-spacing:7px;color:#f4ba4b}
.result-panel h1{font:600 31px Fredoka,sans-serif;margin:13px 0 5px}
.result-panel p{color:#8f99a8;font-size:13px}
.result-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.monster-card{background:#fff;border:1px solid #e8eaf0;border-radius:17px;padding:8px;box-shadow:0 6px 16px #25324d0a;min-width:0}
.monster-card.locked{border-color:#e8e3f3}
.card-inner{border-radius:12px;overflow:hidden;position:relative}
.card-art{height:155px;display:grid;place-items:center;position:relative;overflow:hidden}
.card-art svg{height:143px;width:100%;filter:drop-shadow(0 6px 8px #38335520)}
.card-art:after{content:'✦';position:absolute;top:10px;right:12px;color:#ffffffa8;font-size:16px}
.card-details{padding:10px 10px 9px;background:#fff}
.card-details .card-number{font-size:9px;color:#a6afba;letter-spacing:1.2px;font-weight:800}
.card-details h3{font:600 17px Fredoka,sans-serif;margin:3px 0}
.card-details p{font-size:10px;color:#9aa3b1;margin:0}
.card-rarity{position:absolute;top:9px;left:9px;border-radius:15px;background:#ffffffdb;padding:4px 7px;color:#7758ef;font-size:9px;font-weight:800}
.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.collection-toolbar p{margin:0;font-size:12px;color:#9ba4b1}
.filter-group{display:flex;gap:5px;background:white;border:1px solid var(--line);padding:4px;border-radius:11px}
.filter-button{border:0;background:none;border-radius:8px;padding:7px 10px;color:#9aa3b0;font-size:11px;font-weight:800}
.filter-button.active{background:#eee9ff;color:#7457df}
.progress-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:22px}
.progress-stat{background:white;border:1px solid var(--line);padding:20px;border-radius:17px}
.progress-stat span{font-size:22px}
.progress-stat strong{display:block;font:600 29px Fredoka,sans-serif;margin:5px 0}
.progress-stat p{font-size:11px;color:#9aa3b1;margin:0}
.progress-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:20px}
.progress-section h2{font:600 19px Fredoka,sans-serif;margin:0 0 15px}
.record-row{display:grid;grid-template-columns:1fr 1fr 80px;gap:10px;align-items:center;padding:12px 0;border-top:1px solid #f0f1f4;font-size:12px}
.record-row:first-of-type{border:0}
.record-row span:nth-child(2){color:#99a2b0}
.record-row strong{text-align:right;color:#eeb548}
.empty-note{font-size:12px;color:#a4acb8;line-height:1.6}
.modal-overlay{position:fixed;inset:0;background:#1d284b99;display:grid;place-items:center;z-index:20;padding:20px}
.modal{background:white;border-radius:22px;padding:28px;width:min(100%,380px);box-shadow:0 24px 80px #20294733}
.modal h2{font:600 24px Fredoka,sans-serif;margin:0 0 6px}
.modal p{color:#929baa;font-size:12px;line-height:1.5}
.modal label{display:block;font-size:11px;font-weight:800;margin:20px 0 6px}
.modal input{width:100%;border:2px solid #e8ebf1;border-radius:10px;padding:11px 12px;outline:0}
.modal input:focus{border-color:#9a83f2}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr}
.right-column{grid-template-columns:repeat(3,1fr)}
.collection-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){.sidebar{position:fixed;z-index:10;transform:translateX(-100%);transition:transform .2s;box-shadow:20px 0 40px #1b244322}
.sidebar.open{transform:translateX(0)}
.topbar{padding:0 19px;height:63px}
.mobile-menu{display:block;border:0;background:none;font-size:22px;color:#5e48cf;margin-right:12px}
.breadcrumb{margin-right:auto}
.top-actions{gap:8px}
.streak-badge{display:none}
.page{padding:25px 18px 50px}
.dashboard-grid{gap:17px}
.hero{min-height:180px;padding:24px}
.hero h2{font-size:26px}
.hero-art{width:125px;margin-right:-25px}
.right-column{grid-template-columns:1fr 1fr}
.tip-card{grid-column:1/-1}
.collection-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:510px){.page-title{font-size:29px}
.topbar .breadcrumb{font-size:9px}
.profile-button .chevron{display:none}
.profile-button{font-size:11px}
.hero-art{width:105px;opacity:.85}
.hero-copy{max-width:235px}
.hero h2{font-size:24px}
.world-grid{grid-template-columns:1fr}
.right-column{grid-template-columns:1fr}
.collection-grid{gap:10px}
.card-art{height:130px}
.card-art svg{height:120px}
.collection-toolbar{align-items:start;flex-direction:column}
.stage-card{gap:10px;padding:13px}
.stage-stars{display:none}
.stage-action{min-width:66px}
.record-row{grid-template-columns:1fr 70px}
.record-row span:nth-child(2){display:none}
}
.mystery-art{background:linear-gradient(145deg,#eeeaf9,#f8f5ff);isolation:isolate}
.mystery-art:before{content:"";position:absolute;width:125px;height:125px;border:2px dashed #d9d0ec;border-radius:50%;transform:rotate(15deg)}
.mystery-mark{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:27px;background:linear-gradient(150deg,#b6a5df,#8671c1);box-shadow:0 12px 20px #75659f30;transform:rotate(-8deg)}
.mystery-symbol{color:white;font:600 76px/1 Fredoka,sans-serif;text-shadow:0 3px 5px #55478330}
.mystery-spark{position:absolute;color:#f9e8a8;font-size:18px}
.mystery-spark.left{left:9px;top:12px}
.mystery-spark.right{right:9px;bottom:9px}
.mystery-art .card-rarity{color:#765bb4}
.battle-arena{display:grid;grid-template-columns:1fr 60px 1fr;align-items:end;gap:12px;min-height:270px;margin-top:22px;padding:20px 27px 0;border-radius:19px;background:radial-gradient(circle at 50% 75%,#ffffffa8 0,#ffffff00 48%),linear-gradient(180deg,var(--arena-tint) 0%,#f9fbff 76%);border:1px solid #e9ecf2;position:relative;overflow:hidden}
.battle-side{position:relative;z-index:1;min-width:0}
.fighter-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#5a6578}
.fighter-heading strong{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fighter-heading span{font-weight:800;white-space:nowrap;color:#7f8999}
.hp-track{height:10px;border-radius:10px;background:#e4e8ed;margin-top:8px;overflow:hidden;border:1px solid #dce3e8}
.hp-fill{height:100%;border-radius:10px}
.player-hp{background:linear-gradient(90deg,#74ce90,#46b979)}
.opponent-hp{background:linear-gradient(90deg,#f8bd7a,#f09370)}
.hp-fill.dropping{animation:hp-drop .72s ease-out both}
.battle-fighter{position:relative;width:min(100%,165px);height:166px;margin:9px auto 0;transform-origin:50% 100%}
.battle-fighter svg{display:block;width:100%;height:100%}
.battle-fighter.player.attacking{animation:hero-lunge .72s ease-in-out}
.battle-fighter.opponent.attacking{animation:opponent-lunge .72s ease-in-out}
.battle-fighter.hurt{animation:fighter-hit .6s ease-in-out}
.battle-versus{align-self:center;justify-self:center;z-index:2;background:white;color:#9b85ce;border:1px solid #e3dcf3;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;font:700 14px Fredoka,sans-serif;box-shadow:0 5px 12px #56506a13;margin-top:40px}
.damage-number{position:absolute;top:18px;left:50%;transform:translateX(-50%);color:#e86c5d;font:700 29px Fredoka,sans-serif;text-shadow:0 2px white;animation:damage-pop .75s ease-out both;pointer-events:none}
.question-progress{margin:20px 0 22px}
.question{margin:7px 0 19px}
.question-kicker{color:#755cdd}
.game-footer{margin-top:10px}
.defeat-icon{font-size:55px;line-height:1.2;margin:7px 0 12px}
@keyframes hero-lunge{0%,100%{transform:translateX(0)}
35%{transform:translateX(62px) rotate(7deg)}
60%{transform:translateX(30px) rotate(-3deg)}
}
@keyframes opponent-lunge{0%,100%{transform:translateX(0)}
35%{transform:translateX(-62px) scale(1.08)}
60%{transform:translateX(-25px)}
}
@keyframes fighter-hit{0%,100%{transform:translateX(0)}
25%{transform:translateX(-9px) rotate(-7deg)}
45%{transform:translateX(9px) rotate(7deg)}
65%{transform:translateX(-6px)}
}
@keyframes damage-pop{0%{opacity:0;transform:translate(-50%,16px) scale(.6)}
25%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}
100%{opacity:0;transform:translate(-50%,-34px) scale(1)}
}
@keyframes hp-drop{from{width:var(--hp-before)}
to{width:var(--hp-after)}
}
@media(max-width:550px){.battle-arena{grid-template-columns:1fr 38px 1fr;gap:4px;min-height:225px;padding:13px 10px 0}
.battle-fighter{height:125px}
.fighter-heading{display:block;font-size:10px}
.fighter-heading span{display:block;margin-top:2px}
.battle-versus{width:34px;height:34px;font-size:11px}
.game-panel{padding:18px}
.question{font-size:42px}
}
@media(prefers-reduced-motion:reduce){.battle-fighter.player.attacking,.battle-fighter.opponent.attacking,.battle-fighter.hurt,.damage-number,.hp-fill.dropping{animation:none}
}
.arena-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fighter-heading{background:#ffffffd9;border:1px solid #ffffffb8;border-radius:9px;padding:6px 8px;backdrop-filter:blur(3px)}
.attack-effect{position:absolute;top:37px;left:8px;font-size:27px;animation:effect-fling .7s ease-out both;pointer-events:none}
@keyframes effect-fling{0%{opacity:0;transform:translateX(0) scale(.5)}
30%{opacity:1}
100%{opacity:0;transform:translateX(-82px) scale(1.3)}
}
@media(prefers-reduced-motion:reduce){.attack-effect{animation:none}
}
.battle-arena.boss .battle-fighter.opponent{width:min(100%,176px);height:174px}
.battle-arena.boss .battle-versus{background:#fff4d6;color:#ae7f34;border-color:#f5deae}
@media(max-width:550px){.battle-arena.boss .battle-fighter.opponent{height:131px}
}
.reward-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:24px auto;max-width:590px;text-align:left}
.reward-grid .card-art{height:125px}
.reward-grid .card-art svg{height:118px}
.reward-grid .card-details h3{font-size:15px}
.result-panel:has(.reward-grid){max-width:700px}
@media(max-width:510px){.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.reward-grid .card-details p{font-size:9px}
}
.reward-grid.single{grid-template-columns:minmax(0,1fr);max-width:220px}
.reward-celebration{position:relative;isolation:isolate;min-height:275px}
.reward-celebration .reward-grid{position:relative;z-index:1;margin:18px auto 8px;perspective:1000px}
.reward-flipper{display:grid;transform-style:preserve-3d;transition:transform 1.12s cubic-bezier(.2,.72,.24,1.08);transform:rotateY(0)}
.reward-flipper.is-revealed{transform:rotateY(540deg)}
.reward-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.reward-back{transform:rotateY(180deg)}
.reward-face .monster-card{height:100%}
.reward-announcement{position:relative;z-index:2;min-height:22px;margin:8px 0 0!important;color:#7355cf!important;font-weight:800;font-size:13px!important}
.reward-skip{position:relative;z-index:2;border:0;background:transparent;color:#7660c9;text-decoration:underline;text-underline-offset:3px;font-size:11px;font-weight:800;padding:6px 10px}
.reward-burst{position:absolute;z-index:0;inset:0;pointer-events:none;overflow:visible}
.reward-burst span{position:absolute;left:50%;top:42%;font-size:20px;color:#f1bd4e;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.reward-burst span:nth-child(3n){color:#9a78ed}
.reward-burst span:nth-child(4n){color:#77caa0}
.reward-celebration.done .reward-burst span{animation:reward-star 850ms ease-out both;animation-delay:calc(var(--ray) * 35ms)}
.reward-celebration.replay-reward .reward-burst span{font-size:13px;animation-duration:650ms}
.reward-celebration.challenge-reward .reward-burst span{font-size:23px}
.reward-celebration.replay-reward .reward-grid{animation:reward-welcome 650ms ease-out both}
@keyframes reward-star{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
20%{opacity:1}
100%{opacity:0;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) rotate(80deg) scale(.65)}
}
@keyframes reward-welcome{0%{opacity:.5;transform:translateY(12px) scale(.94)}
65%{opacity:1;transform:translateY(-4px) scale(1.03)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){.reward-flipper,.reward-celebration.done .reward-burst span,.reward-celebration.replay-reward .reward-grid{animation:none;transition:none}
.reward-burst{display:none}
}
.profile-modal{width:min(100%,480px);max-height:min(90vh,760px);overflow-y:auto}
.profile-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.profile-modal-head h2{margin:0}
.modal-close{border:0;background:#f4f1fb;color:#7869a4;width:30px;height:30px;border-radius:9px;font-size:22px;line-height:1}
.profile-list{display:grid;gap:8px;max-height:220px;overflow-y:auto;margin:18px 0;padding-right:3px}
.profile-row{display:flex;align-items:center;gap:11px;border:1px solid #eceaf2;border-radius:13px;padding:9px 11px;background:#fff}
.profile-row.active{background:#f7f3ff;border-color:#dcd1fa}
.profile-avatar{width:33px;height:33px;border-radius:50%;background:#f6deaf;display:grid;place-items:center;color:#815220;font-size:19px;flex:none}
.profile-info{display:grid;gap:2px;min-width:0;flex:1}
.profile-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.profile-info small{color:#99a3b1;font-size:10px}
.profile-row .secondary-btn{padding:8px 11px}
.profile-current{font-size:10px;font-weight:800;color:#7658e8}
.profile-form-row{display:flex;gap:8px;align-items:stretch}
.profile-form-row input{min-width:0;flex:1}
.profile-form-row button{white-space:nowrap}
.profile-modal form{border-top:1px solid #edf0f3;margin-top:15px}
.profile-modal form label{margin-top:14px}
.profile-error{color:#a9454c!important;background:#fff0f1;border-radius:9px;padding:9px 11px}
.profile-row-actions{display:flex;align-items:center;gap:8px;flex:none}
.profile-delete-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #f2d2d5;border-radius:9px;background:#fff8f8;color:#b24b55;padding:0}
.profile-delete-button:hover{background:#ffecef;border-color:#e9adb4}
.profile-delete-button:focus-visible{outline:3px solid #ffbd51;outline-offset:3px}
.delete-confirm-button{border:0;border-radius:10px;background:#bd4e58;color:white;padding:12px 17px;font-size:12px;font-weight:800}
@media(max-width:510px){.profile-modal{padding:21px}
.profile-form-row button{padding:9px 11px}
}
.monster-card.rank-common .card-art,.preview-card.rank-common{background:linear-gradient(145deg,#e6f3e9,#d4ecdd)}
.monster-card.rank-uncommon .card-art,.preview-card.rank-uncommon{background:linear-gradient(145deg,#e4f2ff,#c7e5fa)}
.monster-card.rank-rare .card-art,.preview-card.rank-rare{background:linear-gradient(145deg,#efe6ff,#d9c7fa)}
.monster-card.rank-legendary .card-art,.preview-card.rank-legendary{background:linear-gradient(145deg,#fff2c5,#ffd97e)}
.monster-card.rank-uncommon{border-color:#abd6ec}
.monster-card.rank-rare{border-color:#c6b0eb}
.monster-card.rank-legendary{border-color:#e9bc54;box-shadow:0 7px 22px #d6a84e36}
.rank-uncommon .card-rarity{color:#27759b}
.rank-rare .card-rarity{color:#8050b3}
.rank-legendary .card-rarity{color:#94640c;background:#fff9dd}
.card-details .card-mastery{margin-top:7px;color:#6e5ac7;font-weight:800;line-height:1.35}
.rank-legendary .card-details .card-mastery{color:#a87515}
.preview-card.rank-uncommon{border-color:#d3eafa}
.preview-card.rank-rare{border-color:#e7d9ff}
.preview-card.rank-legendary{border-color:#ffe198}
.reward-celebration.rank-up .reward-burst span{font-size:21px;animation-duration:850ms}
.reward-celebration.rank-up .reward-announcement{color:#ad7818!important}
/* Card frames grow with the player's wins; the higher ranks add corner marks. */
.monster-card.rank-common{background:#f3faf4;border:2px solid #91bca0;padding:7px}
.monster-card.rank-uncommon{background:#eaf8ff;border:2px solid #67b8d8;padding:7px;box-shadow:0 5px 18px #4a9bc021,inset 0 0 0 2px #ffffffba}
.monster-card.rank-rare{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#7352bb,#e7d3ff 50%,#8d68cd) border-box;border:2px solid transparent;padding:7px;box-shadow:0 7px 20px #7653b52e}
.monster-card.rank-legendary{background:linear-gradient(#fffaf0,#fffaf0) padding-box,linear-gradient(135deg,#c78b28,#ffe48d 48%,#ad7522) border-box;border:3px solid transparent;padding:6px;box-shadow:inset 0 0 0 2px #fff2bd,0 0 0 2px #f9e5a6,0 9px 24px #c7963d40}
.monster-card.rank-rare .card-art{background:radial-gradient(circle at 82% 30%,#ffffffaa 0 2px,transparent 3px),radial-gradient(circle at 15% 75%,#ffffffcc 0 2px,transparent 3px),linear-gradient(145deg,#efe6ff,#d9c7fa)}
.monster-card.rank-legendary .card-art{background:radial-gradient(circle at 50% 65%,#fff9df 0,#ffe8a5 58%,#f7cf76 100%)}
.monster-card.rank-legendary .card-art::before{content:"";position:absolute;z-index:0;width:113px;height:113px;border:2px solid #fff6cf;border-radius:50%;box-shadow:0 0 0 8px #fff9dd66,0 0 28px 10px #fff1b8}
.monster-card[class*="rank-"] .card-art::after{display:none}
.monster-card[class*="rank-"] .card-art>svg{position:relative;z-index:1}
.monster-card[class*="rank-"] .card-rarity{z-index:4}
.rank-crest{position:absolute;right:9px;top:8px;z-index:4;display:block;width:31px;height:31px;border-radius:10px;background:#ffffffc9;box-shadow:0 2px 7px #39425b18;color:#729960}
.rank-crest svg{display:block;width:25px!important;height:25px!important;margin:3px;filter:none!important}
.rank-uncommon .rank-crest{color:#398669;background:#edfff3}.rank-rare .rank-crest{color:#7650b5;background:#f8f0ff}.rank-legendary .rank-crest{color:#a66d13;background:#fff7d8;box-shadow:0 0 10px #fff6c7}
.crest-spark-one,.crest-spark-two,.crest-spark-three{position:absolute;line-height:1}
.crest-spark-one{font-size:18px;left:5px;top:3px}.crest-spark-two{font-size:13px;right:3px;top:4px}.crest-spark-three{font-size:9px;right:8px;bottom:3px}
.preview-card.rank-common{border-color:#91bca0}.preview-card.rank-uncommon{border-color:#8ccae3}.preview-card.rank-rare{border-color:#ae8ddd;box-shadow:0 4px 11px #7956b847}.preview-card.rank-legendary{border-color:#e6b84f;box-shadow:0 0 0 2px #ffedb4,0 5px 15px #bf8b3652}
.rank-common .card-rarity{color:#326b48;background:#f1fff3}.rank-common .card-details .card-mastery{color:#407756}.rank-uncommon .card-details .card-mastery{color:#27759b}.rank-rare .card-details .card-mastery{color:#7650b5}
/* Visible card reveal and rank-up celebrations. */
.reward-celebration{--burst-a:#efb94e;--burst-b:#8d70e8;--burst-c:#60bfa0;--burst-d:#ea89a8;--halo:#f5d87780}
.reward-celebration.upgrade-uncommon{--burst-a:#45ad82;--burst-b:#78c9ad;--burst-c:#318d8f;--burst-d:#a8d9bc;--halo:#8fdab077}
.reward-celebration.upgrade-rare{--burst-a:#8b62d5;--burst-b:#c4a5f4;--burst-c:#6949aa;--burst-d:#e4c7fa;--halo:#c9a2ed88}
.reward-celebration.upgrade-legendary{--burst-a:#edb636;--burst-b:#ffe18a;--burst-c:#c98c23;--burst-d:#fff2b8;--halo:#ffcf5caa}
.reward-celebration.simple-replay{--burst-a:#b9a8e2;--burst-b:#dfd6f5;--burst-c:#b4d9c6;--burst-d:#e8d3d9}
.reward-halo{position:absolute;left:50%;top:42%;z-index:0;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,var(--halo) 0,transparent 70%);opacity:0;transform:translate(-50%,-50%) scale(.5);pointer-events:none}
.reward-celebration.done:not(.simple-replay) .reward-halo{animation:reward-glow 1.75s ease-out both}
.reward-burst{z-index:4;overflow:visible}
.reward-burst .reward-particle{position:absolute;left:50%;top:42%;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 2px #ffffffdd);transform:translate(-50%,-50%) scale(.25)}
.reward-celebration .reward-burst .reward-particle.star{font:700 29px/1 Fredoka,sans-serif;text-shadow:0 1px 3px #ffffff}
.reward-celebration.upgrade-legendary .reward-burst .reward-particle.star{font-size:33px}
.reward-burst .reward-particle.confetti{width:10px;height:15px;border-radius:2px;box-shadow:0 1px 3px #ffffffaa}
.reward-burst .tone-0{color:var(--burst-a)}.reward-burst .tone-1{color:var(--burst-b)}.reward-burst .tone-2{color:var(--burst-c)}.reward-burst .tone-3{color:var(--burst-d)}
.reward-burst .reward-particle.confetti{background:currentColor}
.reward-celebration.done .reward-burst .reward-particle{animation:reward-spray 1.55s cubic-bezier(.18,.74,.35,1) both;animation-delay:var(--particle-delay)}
.reward-celebration.simple-replay.done .reward-burst .reward-particle{font-size:18px;width:6px;height:9px;animation-duration:.95s}
.reward-celebration.rank-up.done .reward-grid{animation:reward-rank-pop 1.15s ease-out both}
.reward-celebration.new-card.done .reward-grid{animation:reward-rank-pop 900ms ease-out both}
.reward-celebration.upgrade-legendary.done .reward-grid{animation:reward-legendary-pop 1.45s ease-out both}
@keyframes reward-spray{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}18%{opacity:1}58%{opacity:1;transform:translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1.1) rotate(90deg)}100%{opacity:0;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.7) rotate(230deg)}}
@keyframes reward-glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes reward-rank-pop{0%{transform:scale(.94)}40%{transform:scale(1.08)}70%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes reward-legendary-pop{0%{transform:scale(.9)}35%{transform:scale(1.13)}58%{transform:scale(.98)}78%{transform:scale(1.05)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.reward-celebration.done .reward-burst .reward-particle,.reward-celebration.done .reward-halo,.reward-celebration.done .reward-grid{animation:none!important}.reward-burst,.reward-halo{display:none}}
.card-details .card-meta{white-space:nowrap;letter-spacing:-.15px}
.reward-grid.single{max-width:260px}
@media(max-width:760px){.card-details .card-meta{font-size:9px}}
@media(max-width:520px){.collection-grid{grid-template-columns:1fr}.result-panel:has(.reward-grid){padding:22px}}
.collection-categories{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px}.collection-category{display:inline-flex;align-items:center;gap:8px;border:1px solid #e8e7ef;background:#fff;color:#7b8496;border-radius:13px;padding:10px 15px;font-size:12px;font-weight:800;box-shadow:0 3px 11px #25324d08}.collection-category:hover{border-color:#baa9f7;color:#6d50dd}.collection-category.active{border-color:#bdaef8;background:#eeeaff;color:#6749dc}.collection-category span{font-size:10px;border-radius:20px;padding:2px 6px;background:#f1f2f6;color:#8993a1}.collection-category.active span{background:#ded4ff;color:#6749dc}.dinosaur-preview-card{min-height:260px}.dinosaur-preview-card .card-art{display:flex;align-items:center;justify-content:center}.dinosaur-preview-card .card-art img{display:block;flex:none;width:calc(100% - 16px);height:calc(100% - 16px);min-width:0;min-height:0;object-fit:contain;filter:drop-shadow(0 6px 8px #38335520)}.dinosaur-preview-card .card-details h3{font-size:clamp(12px,1.3vw,16px);white-space:nowrap;letter-spacing:-.25px}
/* Crop explorer art to the head inside both profile circles. */
.avatar,.profile-avatar{position:relative;overflow:hidden;flex:none}
.avatar img,.profile-avatar img{position:absolute;display:block;width:64px;height:80px;max-width:none;left:50%;top:-9px;transform:translateX(-50%)}
.profile-avatar img{width:70px;height:87.5px;top:-9px}
/* Show the whole explorer in battle, including their feet. */
.battle-fighter .explorer-illustration{display:block;width:100%;height:100%;object-fit:contain}
/* Raise the fighter groups within the scene to balance the space above and below. */
.battle-arena .battle-side,.battle-arena .battle-versus{top:-20px}
.battle-arena .battle-versus{position:relative}
@media(max-width:550px){.battle-arena .battle-side,.battle-arena .battle-versus{top:-14px}}
/* Keep explorer choices contained inside the profile dialog. */
.character-picker{min-width:0;margin:18px 0 0;padding:16px 0 0;border:0;border-top:1px solid #edf0f3}
.character-picker legend{padding:0;font-size:11px;font-weight:800}
.character-picker p{margin:4px 0 14px}
.character-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.character-option{min-width:0;cursor:pointer}
.character-option input{position:absolute;width:1px;height:1px;opacity:0}
.character-choice{display:flex;min-width:0;flex-direction:column;align-items:center;gap:5px;padding:7px 3px;border:2px solid #e8ebf1;border-radius:12px;background:#fafbfe}
.character-choice-art{display:grid;place-items:center;width:100%;height:82px;overflow:hidden}
.character-choice-art img{display:block;max-width:100%;width:auto;max-height:100%;height:auto;object-fit:contain}
.character-choice strong{font-size:10px;line-height:1.2;text-align:center}
.character-option input:checked+.character-choice{border-color:#9176ef;background:#f2edff;color:#6749dc}
.character-option input:focus-visible+.character-choice{outline:3px solid #ffbd51;outline-offset:2px}
@media(max-width:510px){.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.safari-preview-card{min-height:260px}
.safari-preview-card .card-art{display:flex;align-items:center;justify-content:center}
.safari-preview-card .card-art img{display:block;flex:none;width:calc(100% - 16px);height:calc(100% - 16px);min-width:0;min-height:0;object-fit:contain;filter:drop-shadow(0 6px 8px #65432624)}
.safari-preview-card .card-details h3{font-size:clamp(12px,1.3vw,16px);white-space:nowrap;letter-spacing:-.25px}
.sea-preview-card{min-height:260px}
.sea-preview-card .card-art{display:flex;align-items:center;justify-content:center}
.sea-preview-card .card-art img{display:block;flex:none;width:calc(100% - 16px);height:calc(100% - 16px);min-width:0;min-height:0;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 8px #38335520)}
.sea-preview-card .card-details h3{font-size:clamp(12px,1.3vw,16px);white-space:nowrap;letter-spacing:-.25px}
.arena-scene{object-fit:cover;object-position:center}
.battle-fighter .monster-illustration{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 3px #26324d29)}
.battle-fighter .monster-illustration.face-left{transform:scaleX(-1)}
.preview-card img{display:block;width:100%;height:100%;object-fit:contain}
.preview-card:has(img[src*="/sea/"]) img{image-rendering:pixelated}
.reward-grid .card-art img{max-width:calc(100% - 16px);max-height:calc(100% - 16px);object-fit:contain}
/* Combined adventure page, Farm Friends, and visual counting questions. */
.hero-art .explorer-illustration{display:block;width:100%;height:170px;object-fit:contain;object-position:center bottom}
.world-card{width:100%;text-align:left;color:var(--ink)}
.world-top,.world-foot{width:100%}
.world-card-title{font:600 18px Fredoka,sans-serif;margin:14px 0 3px}
.world-card-description{font-size:11px;color:#9aa3b0;margin:0 0 15px}
.world-card .progress-track,.world-card .progress-fill{display:block}
.sprout-grid{grid-template-columns:1fr}
.farm-preview-card{min-height:260px}
.farm-preview-card .card-art{display:flex;align-items:center;justify-content:center}
.farm-preview-card .card-art img{display:block;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;filter:drop-shadow(0 6px 8px #38335520)}
.farm-preview-card .card-details h3{font-size:clamp(12px,1.3vw,16px)}
.counting-prompt{display:block;font:600 clamp(22px,3vw,31px) Fredoka,sans-serif;letter-spacing:0;margin:0 0 12px}
.counting-objects{display:grid;grid-template-columns:repeat(5,38px);justify-content:center;gap:7px;max-width:100%;margin:0 auto}
.counting-objects.many{grid-template-columns:repeat(10,31px);gap:5px}
.counting-object{width:38px;height:34px;display:inline-block;position:relative;background:#aeb8c1;border:2px solid #8f9da8;border-radius:55% 44% 49% 42%;transform:rotate(-8deg);box-shadow:inset 5px 5px 0 #ffffff76,0 3px 0 #84929d37}
.counting-object:nth-child(3n){transform:rotate(9deg);background:#c7bab0;border-color:#ab9d91}
.counting-object.shell{background:#ffdcb0;border-color:#e5ad79;border-radius:72% 72% 32% 32%;transform:none;box-shadow:inset 0 5px 0 #fff0d7,0 3px 0 #d2936238}
.counting-object.shell:after{content:' ';position:absolute;left:50%;top:4px;height:20px;border-left:2px solid #e5ad79a8;box-shadow:-7px 1px 0 #e5ad7966,7px 1px 0 #e5ad7966}
.counting-objects.many .counting-object{width:31px;height:29px}
.counting-sequence{display:flex;justify-content:center;gap:10px;letter-spacing:0}
.counting-sequence span{display:grid;place-items:center;width:60px;height:62px;border-radius:14px;background:#f0f8f3;border:2px solid #d9eadf;font:600 36px Fredoka,sans-serif;color:#345b56}
.counting-sequence span.missing{background:#fff3d4;border-color:#f5cf75;color:#9d7419}
@media(max-width:550px){.counting-objects{grid-template-columns:repeat(5,30px);gap:5px}.counting-object{width:30px;height:28px}.counting-objects.many{grid-template-columns:repeat(10,23px);gap:3px}.counting-objects.many .counting-object{width:23px;height:22px}.counting-object.shell:after{height:13px;box-shadow:-5px 1px 0 #e5ad7966,5px 1px 0 #e5ad7966}.counting-sequence span{width:48px;height:51px;font-size:30px}}
@media(max-width:760px){.hero-art .explorer-illustration{height:145px}}
/* Shape Garden questions use large, readable shapes and simple scenes. */
.shape-question{letter-spacing:0;margin-bottom:17px}
.shape-prompt{display:block;font:600 clamp(22px,3vw,31px)/1.25 Fredoka,sans-serif}
.shape-scene{display:block;width:min(100%,300px);height:174px;margin:10px auto 0}
.visual-answers .answer-option{min-height:84px;padding:9px}
.shape-answers .answer-option{display:grid;place-items:center;min-height:96px}
.position-answer{display:flex;align-items:center;justify-content:center;gap:13px;font:600 18px Fredoka,sans-serif}
.shape-svg{display:block;width:68px;height:68px;flex:none}
.position-answer>span:first-child{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#e8f4ed;color:#4a9a70;font:700 26px Fredoka,sans-serif}
@media(max-width:550px){.shape-scene{height:145px}.position-answer{gap:8px;font-size:15px}.shape-svg{width:58px;height:58px}.visual-answers .answer-option{min-height:70px}}