body.fraction-adventure .wrapper{background:#47bd66 url('../assets/group-games/garden.jpg') center top/cover fixed!important}
body.fraction-adventure #fractionWorld{width:calc(100% - 24px);max-width:1000px;background:#fff3bdeF!important;border:4px solid white!important;box-shadow:0 8px #dfa019,0 16px 40px #245d3844!important;padding:16px 20px 20px}
body.fraction-adventure #fractionWorld header{display:grid;grid-template-columns:1fr auto 1fr;background:linear-gradient(#ffc933,#ff9e16);border:3px solid #fff7c3;border-radius:20px;padding:10px;box-shadow:0 5px #d27e11}
body.fraction-adventure #fractionWorld h1{font-size:29px;color:#653484!important;text-shadow:0 2px #fff4bc!important;margin:0}
body.fraction-adventure #fractionWorld header>a{justify-self:start;font-size:13px;text-decoration:none;padding:9px 12px;border:2px solid white;border-radius:12px;background:linear-gradient(#35d9bb,#049c80);box-shadow:0 4px #067767;color:white!important;font-weight:bold}
body.fraction-adventure #fractionWorld header>label,body.fraction-adventure #fractionWorld header>button{justify-self:end;margin:0}
body.fraction-adventure #fractionWorld .fraction-actions button{position:relative;overflow:hidden;background:linear-gradient(#c0fa51,#62ce1a)!important;color:#23450d!important;box-shadow:0 4px #429813!important;transition:transform .2s}
body.fraction-adventure #fractionWorld .fraction-actions #fractionReset{background:linear-gradient(#ac86ff,#8650df)!important;color:white!important;box-shadow:0 4px #6336af!important}
#fractionWorld .fraction-actions button:before{content:'';position:absolute;inset:-40% auto -40% -60%;width:30%;background:#fff8;transform:rotate(25deg);transition:left .55s;pointer-events:none}
#fractionWorld .fraction-actions button:hover:before{left:140%}
#fractionWorld .fraction-actions button:hover:not(:disabled){transform:translateY(-3px)}
#fractionWorld .fraction-toolbar{gap:12px;margin:15px 0 5px}
#fractionWorld .fraction-toolbar>span{background:white;border:2px solid #f4cc5f;border-radius:12px;padding:5px 11px;color:#6b418e}
#fractionWorld .fraction-guide{display:flex;align-items:center;justify-content:center;gap:12px;max-width:550px;margin:0 auto;min-height:100px}
#fractionWorld .fraction-bear{flex:0 0 105px;height:105px;background:url('../assets/addition/bear-states.png') 0 0/300% 100%;filter:drop-shadow(0 4px 2px #70471633);transform-origin:50% 90%}
#fractionWorld .fraction-guide #fractionStatus{background:#fffdf3;border:2px solid #eeb838;border-radius:18px;padding:10px 16px;color:#624178;font-size:16px;text-align:center;box-shadow:0 4px #e5bd6b;margin:0}
#fractionWorld .fraction-bear.happy{background-position:50% 0;animation:frBearDance .6s 3}
#fractionWorld .fraction-bear.thinking{background-position:100% 0;animation:frBearThink .65s}
#fractionWorld .fraction-progress{height:10px;max-width:500px;background:#e5cf85;border-radius:20px;overflow:hidden;margin:4px auto 13px}
#fractionWorld .fraction-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#11c697,#74de24);border-radius:20px;transition:width .5s ease}
#fractionWorld .fraction-deck:not(.dealt){animation:frDeckFloat 2.5s ease-in-out infinite}
#fractionWorld .fraction-actions{margin:10px 0 17px}
#fractionWorld .fraction-board{max-width:840px;gap:13px;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px}
#fractionWorld .fraction-board[data-density=small]{max-width:640px;grid-template-columns:repeat(3,minmax(0,1fr))}
#fractionWorld .fraction-board[data-density=large]{grid-template-columns:repeat(6,minmax(0,1fr))}
#fractionWorld .fraction-card{perspective:1100px;transition:filter .2s;isolation:isolate}
#fractionWorld .fraction-card-inner{transition:transform .65s cubic-bezier(.22,.8,.3,1.15)}
#fractionWorld .fraction-back{border-width:3px;border-radius:20px;font-size:46px;background:radial-gradient(ellipse at 25% 8%,#ffffffbd,transparent 42%),var(--card-color)}
#fractionWorld .fraction-back:before{content:'';position:absolute;inset:6px 9px auto;height:32%;border-radius:15px;background:linear-gradient(#fff8,#fff0);pointer-events:none}
#fractionWorld .fraction-card:not(.flipped):hover .fraction-card-inner{transform:translateY(-5px) rotateZ(-2deg)}
#fractionWorld .fraction-card.matched .fraction-front{border:3px solid #31db90;box-shadow:0 0 0 3px #caff8c,0 0 20px #3de99b88}
#fractionWorld .fraction-card.pop{animation:frMatch .75s cubic-bezier(.2,.8,.3,1)}
#fractionWorld .fraction-card.wrong{animation:frNope .5s .2s}
#fractionWorld .fraction-card.dealing{animation:frDeal .75s both;animation-delay:var(--delay)}
#fractionWorld .fraction-key{margin-top:15px}
.fraction-spark{position:fixed;pointer-events:none;z-index:10000;font-size:22px;will-change:transform,opacity}
@keyframes frDeal{0%{transform:translate(var(--dx),var(--dy)) rotate(-26deg) scale(.35);opacity:0}65%{transform:translateY(-12px) rotate(5deg) scale(1.06);opacity:1}85%{transform:translateY(3px) rotate(-2deg) scale(.98)}100%{transform:none;opacity:1}}
@keyframes frMatch{35%{transform:translateY(-12px) rotate(-4deg) scale(1.09)}65%{transform:translateY(-5px) rotate(4deg) scale(1.04)}100%{transform:none}}
@keyframes frNope{25%{transform:translateX(-7px) rotate(-3deg)}50%{transform:translateX(7px) rotate(3deg)}75%{transform:translateX(-4px)}100%{transform:none}}
@keyframes frBearDance{25%{transform:translateY(-14px) rotate(-8deg)}60%{transform:translateY(-5px) rotate(8deg)}100%{transform:none}}
@keyframes frBearThink{35%{transform:rotate(-8deg)}70%{transform:rotate(5deg)}}
@keyframes frDeckFloat{50%{transform:translateY(-7px) rotate(3deg)}}
@media(max-width:600px){body.fraction-adventure .wrapper{background-attachment:scroll!important}body.fraction-adventure #fractionWorld{width:calc(100% - 12px);padding:9px;margin:10px 6px}body.fraction-adventure #fractionWorld header{gap:5px;padding:8px}body.fraction-adventure #fractionWorld h1{font-size:20px}body.fraction-adventure #fractionWorld header>a{font-size:10px;padding:6px}#fractionWorld .fraction-guide{gap:6px;min-height:82px}#fractionWorld .fraction-bear{flex-basis:78px;height:78px}#fractionWorld .fraction-guide #fractionStatus{font-size:13px;padding:7px}#fractionWorld .fraction-board,#fractionWorld .fraction-board[data-density=large]{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#fractionWorld .fraction-toolbar{font-size:12px;gap:6px}#fractionWorld .fraction-toolbar select{font-size:13px;max-width:150px}#fractionWorld .fraction-toolbar>span{padding:4px 6px}#fractionWorld .fraction-back{font-size:32px;border-radius:14px}#fractionWorld .fraction-actions button{font-size:15px;padding:8px 15px}}
@media(prefers-reduced-motion:reduce){#fractionWorld *,#fractionWorld *:before{animation:none!important;transition:none!important}.fraction-spark{display:none}}