:root { font-family: Arial, Helvetica, system-ui, sans-serif; color: #233128; background: #dfe8df; font-synthesis: none; --ink:#16241b; --green:#43a958; --lime:#bde849; --gold:#f2b632; }
* { box-sizing: border-box; } body { margin:0; min-width:320px; min-height:100vh; overflow:hidden; } button { font:inherit; } button:focus-visible { outline:3px solid #f5cb42; outline-offset:2px; }
.app-shell { min-height:100vh; background:linear-gradient(135deg,#eef3ea,#d5e1d4); display:grid; grid-template-rows:64px 1fr 28px; }
.topbar { z-index:30; display:grid; grid-template-columns:280px 1fr 280px; align-items:center; padding:0 22px; background:#fff; border-bottom:1px solid #cad6ca; box-shadow:0 2px 18px #20392515; }
.brand { display:flex; align-items:center; gap:10px; }.brand-icon { width:37px;height:37px;border-radius:11px;background:#17251c;color:white;display:grid;place-items:center;font-family:'Baloo 2';font-size:20px;font-weight:900;position:relative;}.brand-icon span{color:#bde849;font-size:11px;position:absolute;right:3px;bottom:2px}.brand div:last-child{display:flex;flex-direction:column;line-height:1}.brand strong{font-family:'Baloo 2';font-size:20px;letter-spacing:.05em}.brand small{font-size:8px;letter-spacing:.2em;color:#6a776c;font-weight:900;margin-top:3px}.topbar-center{text-align:center;color:#708075;font-weight:900;font-size:11px;letter-spacing:.16em}.topbar-center i{font-style:normal;color:#b7c2b7;margin:0 10px}.live-dot{width:7px;height:7px;background:#69c66b;border-radius:50%;display:inline-block;margin-right:7px;box-shadow:0 0 0 4px #6fc96c20}.sound-button{justify-self:end;border:1px solid #d7dfd6;background:#f5f7f3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#607064}.sound-button svg{width:17px}.mobile-menu{display:none}.game-layout{min-height:0;display:grid;grid-template-columns:minmax(240px,1fr) minmax(390px,520px) minmax(240px,1fr);gap:16px;padding:16px 22px 12px;max-width:1500px;width:100%;margin:auto}.side-panel{min-width:0}.panel-content{height:100%;overflow:auto;scrollbar-width:none;padding:4px 2px}.panel-kicker{font-size:10px;letter-spacing:.22em;color:#849087;font-weight:900;margin:3px 2px 13px}.profile-card{background:#fff;border:1px solid #d7e0d6;border-radius:16px;padding:14px;display:grid;grid-template-columns:48px 1fr 20px;align-items:center;gap:10px;box-shadow:0 7px 24px #3249320c}.profile-card .avatar{width:48px;height:48px;border-radius:50%;background:#d9edbb;display:grid;place-items:center}.avatar svg{width:30px}.profile-card div:nth-child(2){display:flex;flex-direction:column}.profile-card span{font-size:8px;color:#8b968d;font-weight:900;letter-spacing:.12em}.profile-card strong{font:800 19px 'Baloo 2';line-height:1.1}.profile-card small{font-size:10px;color:#829086}.profile-card>svg{width:16px;color:#a2aca4}.level-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:11px 3px 18px;font-size:9px;font-weight:900;color:#647368}.progress{height:7px;background:#cad6c9;border-radius:10px;overflow:hidden}.progress i{height:100%;background:linear-gradient(90deg,#8acb45,#c8ed4c);display:block}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}.stats-grid>div{background:#fff;border:1px solid #d7e0d6;border-radius:13px;padding:12px;display:grid;grid-template-columns:1fr auto;align-items:end}.stats-grid small{grid-column:1/-1;font-size:8px;letter-spacing:.14em;color:#859087;font-weight:900}.stats-grid strong{font:800 25px 'Baloo 2';line-height:1}.stats-grid span{font-size:9px;color:#849187}.stats-grid .roll-stat{background:#1d2b22;color:#fff}.roll-stat small,.roll-stat span{color:#aebcaf}.panel-content h3{font-size:9px;letter-spacing:.15em;color:#7b887e;margin:17px 3px 9px;display:flex;align-items:center;justify-content:space-between}.panel-content h3 svg{width:14px}.resources{display:grid;gap:7px}.resource{background:#fff;border:1px solid #d9e1d8;border-radius:12px;padding:9px;display:flex;align-items:center;gap:10px}.resource-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:bold 12px serif;border:3px solid}.resource-icon.gold{background:#fff3c4;color:#ad7610;border-color:#edba35}.resource-icon.silver{background:#f2f4f5;color:#7c8b91;border-color:#bbc4c7}.resource-icon.platinum{background:#e9f4f1;color:#61857b;border-color:#9abcb5}.resource div{display:flex;flex-direction:column}.resource small{font-size:8px;color:#89958c;letter-spacing:.14em;font-weight:900}.resource strong{font-size:14px}.menu-list{margin-top:13px;border:1px solid #d8e0d7;border-radius:13px;overflow:hidden}.menu-list button{border:0;background:#fff;width:100%;padding:10px;display:grid;grid-template-columns:24px 1fr 18px;gap:8px;text-align:left;align-items:center;color:#4e5f53}.menu-list button+button{border-top:1px solid #e2e8e1}.menu-list svg{width:17px}.menu-list span{display:flex;flex-direction:column}.menu-list strong{font-size:11px}.menu-list small{font-size:8px;color:#97a299}.save-card{margin-top:13px;padding:12px;background:linear-gradient(135deg,#26382b,#18241c);border-radius:14px;color:#fff;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px}.save-icon{width:32px;height:32px;background:#b8e44c;color:#16241b;border-radius:9px;display:grid;place-items:center;font-weight:900}.save-card div:nth-child(2){display:flex;flex-direction:column}.save-card strong{font-size:10px}.save-card span{font-size:8px;color:#adbaaf}.save-card button{border:0;border-radius:8px;background:#bde849;font-size:8px;font-weight:900;padding:7px 9px}.race-card{background:#fff;border:1px solid #d8e0d7;border-radius:16px;overflow:hidden;box-shadow:0 7px 24px #3249320c}.race-head{background:linear-gradient(120deg,#223328,#132119);color:#fff;padding:14px;display:flex;justify-content:space-between}.race-head div{display:flex;flex-direction:column}.race-head small{font-size:8px;color:#b6c3b8;font-weight:900;letter-spacing:.12em}.race-head strong{font:800 17px 'Baloo 2'}.race-head svg{color:#e8bc3e}.time-left{text-align:center;padding:7px;background:#f5f7f3;font-size:9px;color:#6f7d72;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px}.time-left svg{width:12px}.leaderboard{padding:8px 10px}.leaderboard>div{display:grid;grid-template-columns:20px 29px 1fr auto;align-items:center;gap:5px;padding:6px;border-radius:8px;font-size:10px}.leaderboard b{color:#829086;text-align:center}.mini-avatar{width:25px;height:25px;border-radius:50%;background:#d9e7d5;display:grid;place-items:center;font-weight:900}.leaderboard em{font-style:normal;font-weight:900}.leaderboard .me{background:#eaf7c8}.leaderboard .me b{color:#598b28}.leaderboard small{font-size:7px;color:#68a532}.rank-note{margin:0 10px 8px;border-top:1px solid #e5eae4;padding:9px 4px 2px;display:grid;grid-template-columns:1fr auto}.rank-note span{font-size:8px;color:#7d8a80;font-weight:900}.rank-note svg{width:11px;vertical-align:middle}.rank-note strong{font-size:15px}.rank-note small{grid-column:1/-1;color:#4f9e4c;font-size:9px}.wide-link{width:100%;border:0;border-top:1px solid #e1e7e0;background:#fff;padding:10px;font-size:8px;font-weight:900;letter-spacing:.12em;color:#627167}.wide-link svg{width:12px;vertical-align:middle}.mission-card,.prize-card{background:#fff;border:1px solid #d8e1d7;border-radius:14px;padding:12px}.mission-title{display:flex;gap:9px}.mission-title>span{width:36px;height:36px;background:#e0f3c9;color:#4c9d4e;border-radius:10px;display:grid;place-items:center}.mission-title svg{width:20px}.mission-title div{display:flex;flex-direction:column}.mission-title small,.prize-card small{font-size:7px;color:#849187;font-weight:900;letter-spacing:.11em}.mission-title strong{font:800 14px 'Baloo 2'}.mission-progress{height:9px;background:#dae4d8;border-radius:10px;margin-top:12px;position:relative}.mission-progress i{display:block;width:67%;height:100%;background:linear-gradient(90deg,#78c94e,#c3e84b);border-radius:10px}.mission-progress span,.mission-progress b{position:absolute;top:13px;font-size:8px}.mission-progress b{right:0}.mission-card p{margin:21px 0 0;font-size:9px;color:#7c897e}.prize-card{display:flex;gap:12px;align-items:center}.prize-art{width:65px;height:55px;background:linear-gradient(135deg,#f8e3a6,#dcb84a);border-radius:12px;display:grid;place-items:center;font-size:30px;position:relative}.prize-art span{position:absolute;right:5px;top:4px;font-size:11px}.prize-card>div:last-child{display:flex;flex-direction:column}.prize-card strong{font:800 15px 'Baloo 2'}.prize-card span{font-size:8px;color:#718075}.prize-card svg{width:11px;vertical-align:middle}
.game-canvas{min-width:0;min-height:0;border-radius:22px;overflow:hidden;position:relative;background:#86c95e;box-shadow:0 12px 36px #223c2870;border:5px solid #fff;isolation:isolate}.sky{position:absolute;inset:0 0 57% 0;background:linear-gradient(#bfeafa,#f1f5cf);overflow:hidden}.sun{position:absolute;right:10%;top:10%;width:55px;height:55px;background:#ffe68a;border-radius:50%;box-shadow:0 0 30px 16px #ffe78966}.cloud{position:absolute;width:65px;height:18px;background:#fff9;border-radius:30px;filter:blur(1px)}.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%;width:28px;height:28px;top:-12px;left:13px}.cloud:after{width:36px;height:36px;left:30px;top:-19px}.cloud.c1{left:7%;top:20%;animation:cloud 14s linear infinite}.cloud.c2{right:8%;top:38%;transform:scale(.65);animation:cloud 18s linear reverse infinite}.hills{position:absolute;left:-10%;right:-10%;bottom:-35px;height:100px;border-radius:50% 50% 0 0}.hills.far{background:#8fbd75;transform:rotate(5deg);bottom:-48px}.hills.near{background:#6ea75c;transform:rotate(-6deg);bottom:-70px}.sector-label{position:absolute;z-index:7;top:18px;left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;color:#324b34;text-shadow:0 2px 0 #fff8;white-space:nowrap}.sector-label small{font-size:8px;letter-spacing:.2em;font-weight:900}.sector-label strong{font:800 24px 'Baloo 2';line-height:1;text-transform:uppercase}.sector-label span{font-size:8px;font-weight:800}.world-map{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 65%,#afe075 0 4%,transparent 5%),radial-gradient(ellipse at 85% 75%,#a5d56d 0 8%,transparent 9%),linear-gradient(175deg,transparent 0 29%,#79b95b 30% 100%)}.world-map:after{content:'';position:absolute;inset:38% 0 0;background-image:radial-gradient(#3d7b3b 1px,transparent 1px);background-size:13px 13px;opacity:.13}.path-line{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}.path-line polyline{fill:none;stroke:#d3b177;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 0 #7b784d55)}.tile{z-index:4;position:absolute;transform:translate(-50%,-50%) rotateX(48deg);width:38px;height:30px;border-radius:50%;background:linear-gradient(#f7f2df,#c7c0a8);border:2px solid #fff9;box-shadow:0 5px 0 #8d856e,0 7px 7px #24401f66;display:grid;place-items:center;transition:.3s}.tile span{font-weight:900;font-size:12px;transform:rotateX(-25deg)}.tile.reward{background:linear-gradient(#ffe072,#dc9b20);box-shadow:0 5px 0 #987015,0 7px 7px #24401f66}.tile.quiz{background:linear-gradient(#70ceef,#3187b0);color:white;box-shadow:0 5px 0 #256a83,0 7px 7px #24401f66}.tile.minigame{background:linear-gradient(#bbeb52,#62a93c);color:#20421e;box-shadow:0 5px 0 #4e8133,0 7px 7px #24401f66}.tile.partner{background:linear-gradient(#dfaeff,#9c59c3);color:#fff;box-shadow:0 5px 0 #754091,0 7px 7px #24401f66}.tile.rare{background:linear-gradient(#89fff1,#55b2aa);box-shadow:0 5px 0 #337b76,0 7px 7px #24401f66;animation:shine 2s infinite}.tile.passed{filter:saturate(.45);opacity:.82}.tile.active{width:48px;height:36px;box-shadow:0 0 0 5px #fff8,0 6px 0 #705f3e,0 10px 16px #1c3b1c88}.tile small{position:absolute;top:31px;font-size:6px;background:#203429;color:#fff;padding:2px 5px;border-radius:5px;transform:rotateX(-30deg)}.finish-flag{position:absolute;width:21px;right:-11px;top:-18px;color:#253328;filter:drop-shadow(0 2px 0 white)}.decor{position:absolute;z-index:2;transform-origin:bottom center}.decor.tree{width:44px;height:70px}.decor.tree:before,.decor.tree:after{content:'';position:absolute;border-radius:50%;background:#337f42;width:39px;height:49px;box-shadow:inset -10px -4px #256536,0 5px 9px #24491d55}.decor.tree:after{width:29px;height:35px;left:22px;top:12px;background:#4c9e4e}.decor.tree span{position:absolute;width:8px;height:31px;left:19px;top:39px;background:#79552f;border-radius:3px}.decor.bush{width:42px;height:28px;background:#3f9444;border-radius:50%;box-shadow:inset -8px -5px #297337,14px 7px 0 #51a949}.decor.rock{width:35px;height:23px;background:#829184;border-radius:50% 55% 35% 35%;box-shadow:inset -8px -6px #68776a,0 4px 4px #28402355}.decor.flowers{width:38px;height:25px;background:radial-gradient(circle,#f5ce58 0 2px,#fff 3px 5px,transparent 6px) 0 0/18px 18px,radial-gradient(circle,#ec7891 0 3px,transparent 4px) 8px 9px/18px 18px}.decor.sign{width:45px;height:23px;background:#a9753d;border:3px solid #724924;border-radius:4px;box-shadow:0 20px 0 -9px #744923}.landmark-sign{z-index:3;position:absolute;right:5%;top:42%;background:#f7edcb;border:2px solid #8b6b3e;border-radius:5px;padding:5px 8px 5px 20px;transform:rotate(3deg);display:grid;box-shadow:0 8px 0 -5px #6a4929;font-size:7px}.landmark-sign svg{position:absolute;width:13px;left:4px;top:7px}.landmark-sign span{font-weight:900}.landmark-sign small{font-size:6px}.tidyman{z-index:8;position:absolute;width:65px;height:72px;transform:translate(-42%,-80%);transition:left .32s cubic-bezier(.2,.8,.3,1),top .32s cubic-bezier(.2,.8,.3,1)}.character-shadow{position:absolute;bottom:0;left:11px;width:50px;height:12px;background:#1e3c2855;border-radius:50%;filter:blur(2px)}.person{position:absolute;left:24px;top:3px;width:31px;height:58px}.person-head{position:absolute;width:16px;height:17px;border-radius:50%;background:#17201a;left:8px}.person-body{position:absolute;width:16px;height:29px;background:#17201a;left:8px;top:15px;border-radius:7px 7px 3px 3px;transform:rotate(-4deg)}.person-arm{position:absolute;width:6px;height:26px;background:#17201a;left:4px;top:19px;border-radius:4px;transform:rotate(25deg)}.person-leg{position:absolute;width:7px;height:22px;background:#17201a;top:38px;border-radius:4px;transform-origin:top}.person-leg.one{left:10px;transform:rotate(15deg)}.person-leg.two{left:20px;transform:rotate(-16deg)}.trash-bin{position:absolute;left:1px;top:29px;width:25px;height:31px;background:#223027;border-radius:3px 3px 7px 7px;transform:rotate(-7deg);box-shadow:inset -5px 0 #101814}.trash-bin:before{content:'';position:absolute;left:-2px;right:-2px;top:-5px;height:6px;background:#17201a;border-radius:3px}.trash-bin:after{content:'';position:absolute;width:7px;height:7px;background:#17201a;border-radius:50%;bottom:-4px;left:3px;box-shadow:14px 0 #17201a}.trash-bin i{font-style:normal;color:#bde849;font-size:10px;position:absolute;left:7px;top:8px}.hopping .person{animation:hop .32s alternate infinite}.hopping .trash-bin{animation:binhop .42s alternate infinite}.leaves{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}.leaves i{position:absolute;color:#508e3c;font-size:7px;animation:leaf 8s linear infinite}.leaves i:nth-child(1){left:12%;animation-delay:-2s}.leaves i:nth-child(2){left:75%;animation-delay:-5s}.leaves i:nth-child(3){left:48%;animation-delay:-7s}.game-controls{position:absolute;z-index:12;bottom:0;left:0;right:0;height:87px;background:linear-gradient(#ffffffec,#fff);border-top:1px solid #d8e1d8;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;padding:9px 13px;gap:9px}.dice-result,.next-tile{display:flex;flex-direction:column;align-items:center}.dice-result>span{width:37px;height:37px;background:#fff;border:2px solid #28372d;border-radius:9px;display:grid;place-items:center;font:900 23px 'Baloo 2';box-shadow:0 4px 0 #b9c3ba}.dice-result svg{width:29px}.dice-result small,.next-tile small{font-size:6px;font-weight:900;letter-spacing:.1em;color:#849087;margin-top:4px}.spinning{animation:dice .22s infinite}.roll-button{height:58px;border:0;border-radius:16px;background:linear-gradient(#caed54,#9dc936);box-shadow:0 6px 0 #5e8429,0 9px 15px #4a6b2677;color:#1d301a;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.15s}.roll-button:hover{transform:translateY(-2px);filter:brightness(1.05)}.roll-button:active{transform:translateY(4px);box-shadow:0 2px 0 #5e8429}.roll-button:disabled{filter:grayscale(.7);cursor:not-allowed}.roll-button span{font:900 27px 'Baloo 2';line-height:.9}.roll-button small{font-size:6px;letter-spacing:.16em;font-weight:900;margin-top:5px}.next-tile strong{font-size:8px;margin-top:5px;text-transform:uppercase}.next-tile svg{width:11px;vertical-align:middle;color:#d4a62b}footer{display:flex;align-items:center;gap:20px;padding:0 22px;background:#17241c;color:#809084;font-size:7px;letter-spacing:.14em;font-weight:900}footer span:nth-child(2){margin-left:auto}.drawer-close,.drawer-backdrop{display:none}
.modal-overlay{position:fixed;z-index:100;inset:0;background:#102017bb;backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px;animation:fade .25s}.event-modal{width:min(540px,100%);max-height:92vh;overflow:auto;background:#f9fbf5;border:5px solid #fff;border-radius:24px;box-shadow:0 25px 80px #061009aa;position:relative;padding:26px;text-align:center}.modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:#e9eee7;display:grid;place-items:center;cursor:pointer}.modal-close svg{width:17px}.modal-kicker{font-size:9px;letter-spacing:.23em;color:#6ca842;font-weight:900;margin-top:4px}.event-modal h2{font:900 28px 'Baloo 2';margin:4px 30px 15px}.reward-view{background:radial-gradient(circle at 50% 30%,#fff9,#f4d778);border-radius:18px;padding:25px;display:flex;flex-direction:column;align-items:center}.reward-view>svg{width:62px;height:62px;color:#bd8514;filter:drop-shadow(0 8px 8px #9d741855)}.reward-view strong{font:900 36px 'Baloo 2';margin-top:8px}.reward-view span{font-size:9px;letter-spacing:.2em;font-weight:900}.reward-view button,.partner-intro>button:first-of-type{margin-top:18px;border:0;border-radius:12px;background:#1c2d21;color:#fff;padding:12px 30px;font-weight:900;font-size:11px;letter-spacing:.08em}.rare-reward{background:radial-gradient(circle at 50% 30%,#fff,#b7eee8)}.quiz>svg{width:50px;height:50px;color:#4b9ec4}.quiz p{font-weight:900}.quiz button{display:block;width:100%;border:1px solid #d4ded2;background:#fff;border-radius:11px;padding:12px;margin:7px 0;font-weight:800}.quiz button:hover{background:#e7f6c7}.partner-intro{display:flex;flex-direction:column;align-items:center}.partner-logo{width:70px;height:70px;border-radius:20px;background:#be7cdb;color:#fff;display:grid;place-items:center;font:900 28px 'Baloo 2'}.partner-intro p{font-size:13px;color:#5e6d61;max-width:390px}.partner-intro button svg{width:14px;vertical-align:middle}.partner-intro .text-button{border:0;background:none;margin-top:10px;text-decoration:underline;font-size:10px;color:#647168}.challenge-instruction{display:flex;flex-direction:column}.challenge-instruction>span{font-size:8px;letter-spacing:.18em;font-weight:900;color:#5d9a39}.challenge-instruction strong{font-size:15px}.challenge-instruction small{font-size:9px;color:#78857a}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.answer-grid button{border:1px solid #d2dcd0;border-radius:12px;background:#fff;box-shadow:0 4px 0 #c6d0c4;padding:13px 5px;font-weight:900;cursor:grab;position:relative}.answer-grid button:hover{transform:translateY(-2px);border-color:#92be54}.answer-grid button span{position:absolute;right:5px;color:#c5cdc5}.challenge-bin{margin:auto;width:100px;height:105px;background:#26342b;border-radius:5px 5px 16px 16px;color:#bce849;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:inset -13px 0 #17231b}.challenge-bin .bin-lid{position:absolute;left:-7px;right:-7px;top:-9px;height:12px;border-radius:6px;background:#17231b}.challenge-bin strong{font-size:28px}.challenge-bin span{font-size:8px;letter-spacing:.2em}.challenge-bin.clang{animation:clang .15s 4}.drag-hint{font-size:8px;color:#8b968d}.error-bubble{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;background:#e26355;color:#fff;border-radius:8px;padding:7px 10px;font-size:9px;font-weight:900}.toast{position:fixed;z-index:110;left:50%;bottom:38px;transform:translateX(-50%);background:#19291f;color:#fff;padding:11px 18px;border-radius:12px;box-shadow:0 10px 30px #07130a66;font-size:11px;font-weight:900;animation:toast .3s}.toast span{color:#bee84b;margin-right:8px}.sector-complete{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);background:#17261d;color:#fff;padding:25px 45px;border:3px solid #bde849;border-radius:18px;display:flex;flex-direction:column;text-align:center;box-shadow:0 20px 80px #0008;animation:sectorflash 1.8s both}.sector-complete small{font-size:9px;letter-spacing:.22em;color:#bde849}.sector-complete strong{font:900 27px 'Baloo 2'}
.intro{position:fixed;z-index:200;inset:0;background:linear-gradient(#f0ebdc 0 55%,#6fb552 56%);overflow:hidden}.intro:after{content:'';position:absolute;inset:56% 0 0;background:radial-gradient(#3c813b 1px,transparent 1px);background-size:17px 17px;opacity:.28}.intro-skip{position:absolute;z-index:4;right:25px;top:20px;border:1px solid #879186;background:#ffffff99;border-radius:20px;padding:7px 13px;font-size:9px;font-weight:900}.intro-box{position:absolute;left:50%;top:6%;transform:translateX(-50%);width:230px;height:300px;background:#faf7e9;border:2px solid #d6d0bc;box-shadow:18px 20px 0 #dcd5bf;animation:boxfade 5.5s both}.box-stripes{height:35px;background:repeating-linear-gradient(90deg,#7dbf55 0 22px,#f8dc65 22px 44px)}.box-label{text-align:center;margin-top:50px;font:800 20px 'Baloo 2';color:#6e756c}.intro-mark{text-align:center;font-size:50px;color:#1c271f}.intro-character{position:absolute;z-index:2;left:50%;top:28%;width:85px;height:110px;animation:introJump 5.7s cubic-bezier(.4,0,.2,1) both}.intro-character .head{position:absolute;left:42px;width:22px;height:22px;background:#161d18;border-radius:50%}.intro-character .body{position:absolute;left:41px;top:20px;width:23px;height:45px;border-radius:8px;background:#161d18}.intro-character .arm{position:absolute;left:34px;top:25px;width:8px;height:37px;border-radius:4px;background:#161d18;transform:rotate(25deg)}.intro-character .leg{position:absolute;top:60px;width:9px;height:35px;background:#161d18;border-radius:5px}.intro-character .l1{left:44px;transform:rotate(15deg)}.intro-character .l2{left:57px;transform:rotate(-15deg)}.intro-character .bin{position:absolute;left:2px;top:47px;width:35px;height:42px;background:#1e2b22;color:#bde849;display:grid;place-items:center;border-radius:3px 3px 8px 8px;font-size:14px}.intro-ground{position:absolute;left:50%;top:74%;transform:translateX(-50%);width:140px;height:25px;background:#294d2b55;border-radius:50%;filter:blur(5px);animation:groundin 5s both}.intro-title{position:absolute;z-index:3;left:50%;top:62%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;opacity:0;animation:titlein 1s 4.7s forwards;color:#fff;text-shadow:0 3px 0 #306634}.intro-title small{font-size:10px;letter-spacing:.3em}.intro-title strong{font:900 55px 'Baloo 2';line-height:1}.intro-title span{font-size:13px;letter-spacing:.2em;font-weight:900;color:#daf56d}
@keyframes cloud{from{translate:-30px}to{translate:70px}}@keyframes shine{50%{filter:brightness(1.35);box-shadow:0 0 15px #adfff7,0 5px 0 #337b76}}@keyframes hop{to{transform:translateY(-12px) rotate(4deg)}}@keyframes binhop{to{transform:translateY(-5px) rotate(3deg)}}@keyframes leaf{from{top:-5%;transform:rotate(0)}to{top:90%;transform:rotate(540deg) translateX(30px)}}@keyframes dice{to{transform:rotate(90deg)}}@keyframes fade{from{opacity:0}}@keyframes toast{from{opacity:0;transform:translate(-50%,15px)}}@keyframes clang{50%{transform:rotate(5deg)}}@keyframes sectorflash{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}@keyframes boxfade{0%,60%{opacity:1}100%{opacity:.1;transform:translateX(-50%) scale(1.3)}}@keyframes introJump{0%,12%{transform:translate(-15px,0)}25%{transform:translate(25px,-60px) rotate(15deg)}55%{transform:translate(90px,310px) rotate(370deg)}70%{transform:translate(90px,295px) rotate(360deg)}100%{transform:translate(90px,295px) rotate(360deg)}}@keyframes groundin{0%,55%{opacity:0}70%{opacity:1}}@keyframes titlein{to{opacity:1;transform:translate(-50%,-15px)}}
@media(max-width:1050px){.game-layout{grid-template-columns:210px minmax(370px,500px) 210px;padding-inline:10px;gap:10px}.topbar{grid-template-columns:220px 1fr 220px;padding:0 12px}.save-card{grid-template-columns:30px 1fr}.save-card button{display:none}}
@media(max-width:820px){body{overflow:auto}.app-shell{height:100svh;grid-template-rows:55px 1fr 23px}.topbar{grid-template-columns:42px 1fr auto 42px;padding:0 7px}.topbar-center{display:none}.brand{justify-content:center}.sound-button{width:34px;height:34px}.mobile-menu{display:grid;border:0;background:none;place-items:center;color:#334438}.mobile-menu svg{width:20px}.game-layout{display:block;padding:6px;height:100%;min-height:0}.game-canvas{height:100%;max-width:520px;margin:auto;border-width:3px;border-radius:17px}.side-panel{position:fixed;z-index:70;top:0;bottom:0;width:min(330px,88vw);background:#eef3ec;padding:18px;transition:transform .28s;box-shadow:0 0 50px #0a160d55}.player-side{left:0;transform:translateX(-105%)}.world-side{right:0;transform:translateX(105%)}.side-panel.drawer-open{transform:none}.drawer-close{display:grid;position:absolute;z-index:2;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#fff;place-items:center}.drawer-close svg{width:17px}.drawer-backdrop{display:block;position:fixed;z-index:60;inset:0;border:0;background:#0a160d88}.panel-content{padding-top:28px}.game-controls{height:80px}.world-map{font-size:90%}.tile{width:34px;height:27px}.tidyman{transform:translate(-42%,-77%) scale(.88)}footer{padding:0 10px}.desktop-only{display:none}.intro-title strong{font-size:42px}.intro-character{margin-left:-80px}.intro-box{width:190px;height:270px}.answer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-height:690px) and (min-width:821px){.game-layout{padding-top:7px;padding-bottom:7px}.profile-card{padding:8px}.level-row{margin-bottom:8px}.stats-grid{margin-bottom:8px}.resource{padding:5px}.menu-list,.save-card{margin-top:7px}.panel-content h3{margin-top:8px}.race-head{padding:9px}.leaderboard>div{padding:3px}.mission-card,.prize-card{padding:7px}.game-controls{height:73px}.tile{width:32px;height:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.game-canvas{height:100%;width:auto;max-width:100%;aspect-ratio:9/16;justify-self:center}
@media(max-width:820px){.game-canvas{width:100%;aspect-ratio:auto}}

/* Saját rendszer: külső ikon- és betűkészlet nélkül. */
.brand strong,.profile-card strong,.stats-grid strong,.race-head strong,.mission-title strong,.prize-card strong,.sector-label strong,.roll-button span,.event-modal h2,.reward-view strong,.sector-complete strong,.intro-title strong { font-family: Arial Black, Arial, sans-serif; }
.avatar,.dice-placeholder,.reward-symbol,.quiz-symbol { font-size:26px;font-weight:900;display:grid;place-items:center; }
.profile-card>b,.drawer-close { font-size:22px; }
.finish-flag { font-size:20px;line-height:1; }
.landmark-sign>b { position:absolute;left:5px;top:5px; }
.race-head>b { font-size:20px; }

/* --------------------------------------------------------------------------
   TIDYMAN SHELL V2 - a látványterv sötét, játék-központú felületi kerete
   -------------------------------------------------------------------------- */
.app-shell {
  display:block;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%,rgba(93,145,86,.35),transparent 45%),
    linear-gradient(135deg,#172019,#0b100d 70%);
}
.topbar,.app-shell>footer { display:none; }
.game-layout {
  height:100vh;
  width:100%;
  max-width:1920px;
  padding:10px;
  gap:12px;
  grid-template-columns:minmax(238px,270px) minmax(360px,1fr) minmax(250px,292px);
  align-items:stretch;
}
.game-canvas {
  height:100%;
  max-height:calc(100vh - 20px);
  width:auto;
  max-width:100%;
  aspect-ratio:9/16;
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  box-shadow:0 20px 60px #0009;
}
.side-panel {
  min-height:0;
  color:#f4f6f4;
  background:linear-gradient(160deg,rgba(21,23,22,.97),rgba(8,10,9,.95));
  border:1px solid rgba(255,255,255,.17);
  border-radius:17px;
  padding:13px;
  box-shadow:0 18px 55px #0008,inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.panel-content { padding:0 1px; }
.panel-kicker {
  position:sticky;
  top:0;
  z-index:3;
  margin:-1px -1px 13px;
  padding:7px 4px 13px;
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
  background:linear-gradient(#151716 75%,transparent);
}
.profile-card,.resource,.menu-list,.menu-list button,.race-card,.wide-link,.mission-card,.prize-card {
  color:#f5f6f5;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.13);
  box-shadow:none;
}
.profile-card { padding:12px; }
.profile-card .avatar { color:#d4decd;background:radial-gradient(circle at 40% 30%,#49534c,#111);border:1px solid #667169; }
.profile-card small,.profile-card span,.level-row,.resource small,.stats-grid span,.stats-grid small,
.menu-list small,.mission-card p,.prize-card span,.rank-note span,.time-left { color:#abb2ad; }
.level-row .progress,.mission-progress { background:#343835; }
.stats-grid>div,.stats-grid .roll-stat {
  color:#fff;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
}
.stats-grid .roll-stat strong,.resource strong,.leaderboard em,.rank-note strong { color:#f4c63f; }
.panel-content h3 { color:#f1f3f1;border-top:1px solid rgba(255,255,255,.1);padding-top:13px; }
.resource { padding:8px; }
.resource-icon { background:#222!important; }
.menu-list button+button { border-color:rgba(255,255,255,.1); }
.menu-list button { color:#d9ded9; }
.save-card { border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055); }
.race-head { background:linear-gradient(135deg,#a61d58,#5d1648); }
.time-left { background:rgba(255,255,255,.045); }
.leaderboard .me { color:#fff;background:linear-gradient(90deg,rgba(239,190,50,.25),rgba(239,190,50,.08)); }
.leaderboard b,.leaderboard .me b { color:#f2c43f; }
.mini-avatar { color:#111;background:#d8ded8; }
.rank-note,.wide-link { border-color:rgba(255,255,255,.12); }
.mission-title>span { background:#30432c; }
.prize-art { color:#222; }
.edge-tab { display:none; }
.drawer-close { color:#d5d9d6;background:rgba(255,255,255,.08); }

@media(max-width:1000px) and (min-width:821px) {
  .game-layout { grid-template-columns:220px minmax(340px,1fr) 230px;gap:8px;padding:7px; }
  .side-panel { padding:9px; }
}

@media(max-width:820px) {
  body { overflow:hidden; }
  .app-shell { height:100svh;min-height:0; }
  .game-layout { display:block;height:100%;padding:0; }
  .game-canvas {
    height:100%;
    width:100%;
    max-height:none;
    max-width:none;
    aspect-ratio:auto;
    border:0;
    border-radius:0;
  }
  .side-panel {
    top:8px;
    bottom:8px;
    width:min(316px,88vw);
    padding:14px;
    border-radius:16px;
    z-index:80;
  }
  .player-side { left:8px; }
  .world-side { right:8px; }
  .edge-tab {
    position:fixed;
    z-index:55;
    top:15%;
    display:flex;
    align-items:center;
    gap:5px;
    height:92px;
    padding:9px 6px;
    color:#fff;
    background:rgba(13,16,14,.91);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 8px 25px #0008;
    font-size:18px;
  }
  .edge-tab span { writing-mode:vertical-rl;font-size:8px;letter-spacing:.16em;font-weight:900; }
  .edge-tab-left { left:0;border-left:0;border-radius:0 12px 12px 0; }
  .edge-tab-right { right:0;border-right:0;border-radius:12px 0 0 12px; }
  .drawer-backdrop { z-index:70;background:#05080699; }
  .game-controls { padding-inline:24px; }
}

/* Nagyobb, kényelmesebben olvasható paneltipográfia. */
.side-panel .panel-kicker { font-size:13px; }
.side-panel .profile-card strong { font-size:21px; }
.side-panel .profile-card small { font-size:11px; }
.side-panel .profile-card span { font-size:9px; }
.side-panel .level-row { font-size:10px; }
.side-panel .stats-grid small,
.side-panel .resource small { font-size:9px; }
.side-panel .stats-grid span { font-size:10px; }
.side-panel .resource strong { font-size:16px; }
.side-panel .panel-content h3 { font-size:10px; }
.side-panel .menu-list strong { font-size:12px; }
.side-panel .menu-list small { font-size:9px; }
.side-panel .race-head small { font-size:9px; }
.side-panel .race-head strong { font-size:19px; }
.side-panel .time-left { font-size:10px; }
.side-panel .leaderboard>div { font-size:12px; }
.side-panel .rank-note span,
.side-panel .rank-note small { font-size:10px; }
.side-panel .mission-title small,
.side-panel .prize-card small { font-size:8px; }
.side-panel .mission-title strong,
.side-panel .prize-card strong { font-size:16px; }
.side-panel .mission-card p,
.side-panel .prize-card span { font-size:10px; }

@media(max-width:820px) {
  .side-panel .panel-kicker { font-size:14px; }
  .side-panel .profile-card strong { font-size:23px; }
  .side-panel .profile-card small { font-size:12px; }
  .side-panel .level-row { font-size:11px; }
  .side-panel .stats-grid small,
  .side-panel .resource small { font-size:10px; }
  .side-panel .stats-grid span { font-size:11px; }
  .side-panel .resource strong { font-size:17px; }
  .side-panel .panel-content h3 { font-size:11px; }
  .side-panel .menu-list strong { font-size:13px; }
  .side-panel .menu-list small { font-size:10px; }
  .side-panel .race-head strong { font-size:20px; }
  .side-panel .leaderboard>div { font-size:13px; }
  .side-panel .mission-title strong,
  .side-panel .prize-card strong { font-size:17px; }
  .side-panel .mission-card p,
  .side-panel .prize-card span { font-size:11px; }
}

.reset-game-button {
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  text-align:left;
  color:#c8cfca;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  cursor:pointer;
  transition:.18s ease;
}
.reset-game-button:hover { color:#fff;background:rgba(211,77,67,.16);border-color:rgba(236,105,92,.45); }
.reset-game-button>span { grid-row:1/3;font-size:21px;color:#e79760; }
.reset-game-button strong { font-size:10px;letter-spacing:.08em; }
.reset-game-button small { font-size:9px;color:#8f9992; }
@media(max-width:820px) {
  .reset-game-button { padding:12px; }
  .reset-game-button strong { font-size:12px; }
.reset-game-button small { font-size:10px; }
}

/* Próba grafikus pályaháttér. A kép már tartalmazza az utat és a növényzetet. */
.game-canvas .sky { display:none; }
.game-canvas .world-map {
  background-image:
    linear-gradient(to bottom,rgba(12,21,13,.12),transparent 16%,transparent 78%,rgba(11,18,12,.22)),
    url('../assets/basic-path-sample.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.game-canvas .world-map::after { display:none; }
.game-canvas .path-line,
.game-canvas .decor { display:none; }
.game-canvas .sector-label {
  top:14px;
  padding:8px 16px;
  color:#fff;
  text-shadow:0 2px 8px #000,0 1px 2px #000;
  background:rgba(16,20,16,.48);
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  backdrop-filter:blur(7px);
}
.game-canvas .landmark-sign { display:none; }
.game-canvas .tile { box-shadow:0 5px 0 #716852,0 8px 12px #1b160d88; }
.game-canvas .tile.active { box-shadow:0 0 0 5px #fff9,0 6px 0 #705f3e,0 12px 20px #161107aa; }

/* Grafikus lépkedőkő, a mezőtípusok saját glow-jelzésével. */
.game-canvas .tile {
  width:96px;
  height:53px;
  overflow:visible;
  border:0;
  border-radius:50%;
  background-color:transparent;
  background-image:url('../assets/stepping-stone-01.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:none;
  filter:drop-shadow(0 6px 5px rgba(25,18,8,.55));
}
.game-canvas .tile span {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:11px;
  line-height:1;
  text-shadow:0 1px 2px #0008;
  transform:rotateX(-25deg) translateY(-1px);
  opacity:0;
}
.game-canvas .tile.quiz span,
.game-canvas .tile.reward span,
.game-canvas .tile.minigame span,
.game-canvas .tile.partner span,
.game-canvas .tile.rare span { opacity:1; }
.game-canvas .tile.quiz span { background:linear-gradient(#62d7ff,#238bc6);box-shadow:0 0 14px 5px rgba(58,190,255,.72); }
.game-canvas .tile.reward span { background:linear-gradient(#ffe66e,#d89b18);box-shadow:0 0 14px 5px rgba(255,205,58,.78); }
.game-canvas .tile.minigame span { background:linear-gradient(#c8ef64,#5ba83c);box-shadow:0 0 14px 5px rgba(144,224,72,.72); }
.game-canvas .tile.partner span { background:linear-gradient(#e3a0ff,#9050c4);box-shadow:0 0 14px 5px rgba(194,91,255,.72); }
.game-canvas .tile.rare span { background:linear-gradient(#9ffff1,#35aea8);box-shadow:0 0 17px 7px rgba(83,255,232,.84); }
.game-canvas .tile.passed { opacity:.72;filter:grayscale(.4) drop-shadow(0 5px 4px rgba(25,18,8,.45)); }
.game-canvas .tile.active {
  width:109px;
  height:62px;
  box-shadow:none;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 15px rgba(199,239,83,.95)) drop-shadow(0 7px 6px rgba(25,18,8,.65));
  animation:active-stone-glow 1.8s ease-in-out infinite;
}
.game-canvas .tile.active span { transform:rotateX(-25deg) translateY(-1px) scale(1.08); }
.game-canvas .tile small { top:34px; }
.game-canvas .tile .finish-flag { right:-7px;top:-20px; }
@keyframes active-stone-glow {
  0%,100% { filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(199,239,83,.82)) drop-shadow(0 7px 6px rgba(25,18,8,.65)); }
  50% { filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px rgba(199,239,83,1)) drop-shadow(0 7px 6px rgba(25,18,8,.65)); }
}
@media(max-width:820px) {
  .game-canvas .tile { width:89px;height:50px; }
  .game-canvas .tile.active { width:102px;height:58px; }
}

/* Lebegő sector-üzenet: röviden megjelenik, majd felfelé távozik. */
.sector-float-message {
  position:absolute;
  z-index:25;
  top:13%;
  left:50%;
  min-width:230px;
  padding:12px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#fff;
  background:linear-gradient(135deg,rgba(118,61,190,.82),rgba(36,154,178,.76));
  border:1px solid rgba(255,255,255,.5);
  border-radius:22px 8px 22px 8px;
  box-shadow:0 12px 35px rgba(23,16,56,.42),inset 0 1px rgba(255,255,255,.35);
  backdrop-filter:blur(9px);
  text-align:center;
  pointer-events:none;
  animation:sector-message-fly 3.3s cubic-bezier(.2,.8,.25,1) forwards;
}
.sector-float-message::before,.sector-float-message::after {
  content:'✦';position:absolute;color:#dfff79;text-shadow:0 0 12px #cfff52;
}
.sector-float-message::before { left:13px;top:12px; }
.sector-float-message::after { right:13px;bottom:10px;font-size:9px; }
.sector-float-message small { font-size:8px;font-weight:900;letter-spacing:.22em;opacity:.86; }
.sector-float-message strong { font:900 22px/1.1 Arial Black,Arial,sans-serif;text-transform:uppercase;text-shadow:0 2px 8px #24113d99; }
.sector-float-message span { margin-top:3px;font-size:9px;font-weight:800;opacity:.9; }
@keyframes sector-message-fly {
  0% { opacity:0;transform:translate(-50%,32px) scale(.72) rotate(-2deg);filter:blur(4px); }
  14% { opacity:1;transform:translate(-50%,0) scale(1.04) rotate(1deg);filter:blur(0); }
  26%,65% { opacity:1;transform:translate(-50%,-5px) scale(1) rotate(0); }
  100% { opacity:0;transform:translate(-50%,-115px) scale(.88);filter:blur(2px); }
}

/* Alsó HUD nélkül: csak a valószerű dobókocka és az időszakos DOBJ buborék. */
.dice-dock {
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  bottom:14px;
  height:112px;
  pointer-events:none;
}
.dice-roll-zone {
  --dice-x:0px;
  position:absolute;
  left:50%;
  bottom:0;
  width:82px;
  height:82px;
  padding:0;
  border:0;
  border-radius:22px;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  transform:translateX(calc(-50% + var(--dice-x)));
  transition:transform .7s cubic-bezier(.18,.85,.23,1.15),filter .2s;
  filter:drop-shadow(0 13px 12px rgba(13,8,3,.58));
}
.dice-roll-zone:hover { filter:drop-shadow(0 14px 14px rgba(13,8,3,.7)) drop-shadow(0 0 11px rgba(211,241,95,.7)); }
.dice-roll-zone:disabled { cursor:default; }
.dice-cube {
  position:absolute;
  inset:4px;
  display:block;
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(228,224,207,.98) 65%,rgba(181,176,157,.98));
  border:1px solid rgba(101,96,80,.5);
  box-shadow:inset 7px 7px 12px #fff,inset -8px -10px 13px rgba(93,87,68,.25),0 7px 0 #8d8775,0 10px 10px #21190d80;
  transform:perspective(180px) rotateX(10deg) rotateY(-8deg);
}
.dice-cube::before {
  content:'';position:absolute;inset:5px;border-radius:14px;border-top:1px solid #fff;border-left:1px solid #fff8;pointer-events:none;
}
.dice-face { position:absolute;inset:12px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr); }
.pip { width:10px;height:10px;place-self:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,#4b4b47,#111 58%,#000);box-shadow:inset 1px 1px 2px #000,0 1px 1px #fff8; }
.pip-1{grid-area:1/1}.pip-2{grid-area:1/2}.pip-3{grid-area:1/3}.pip-4{grid-area:2/1}.pip-5{grid-area:2/2}.pip-6{grid-area:2/3}.pip-7{grid-area:3/1}.pip-8{grid-area:3/2}.pip-9{grid-area:3/3}
.roll-callout {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:87px;
  min-width:112px;
  padding:9px 14px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#1c2b18;
  background:linear-gradient(#d8f46c,#a8d539);
  border:1px solid #ecff9a;
  border-radius:18px 18px 18px 5px;
  box-shadow:0 8px 18px #17200d66,inset 0 1px #fff9;
  transform-origin:50% 100%;
  animation:roll-callout-cycle 4.8s ease-in-out infinite;
}
.roll-callout::after { content:'';position:absolute;bottom:-7px;left:19px;border-width:8px 8px 0 0;border-style:solid;border-color:#a8d539 transparent transparent transparent; }
.roll-callout strong { font:900 20px/1 Arial Black,Arial,sans-serif; }
.roll-callout small { margin-top:3px;font-size:7px;font-weight:900;letter-spacing:.1em; }
.dice-roll-zone.dice-rolling .roll-callout,.dice-roll-zone:disabled .roll-callout { opacity:0;animation:none; }
.dice-roll-zone.dice-rolling { animation:dice-bottom-bounce .95s cubic-bezier(.2,.8,.3,1); }
.dice-roll-zone.dice-rolling .dice-cube { animation:dice-cube-tumble .95s cubic-bezier(.2,.8,.3,1); }
@keyframes roll-callout-cycle {
  0%,8% { opacity:0;transform:translateX(-50%) translateY(14px) scale(.7,.9); }
  15% { opacity:1;transform:translateX(-50%) translateY(0) scale(1.08,.92) rotate(-2deg); }
  21% { transform:translateX(-50%) scale(.93,1.08) rotate(2deg); }
  27%,60% { opacity:1;transform:translateX(-50%) scale(1); }
  72%,100% { opacity:0;transform:translateX(-50%) translateY(-16px) scale(.86); }
}
@keyframes dice-bottom-bounce {
  0% { transform:translateX(calc(-50% + var(--dice-start-x))) translateY(0) rotate(0); }
  22% { transform:translateX(calc(-50% + var(--dice-x-30))) translateY(-72px) rotate(80deg); }
  48% { transform:translateX(calc(-50% + var(--dice-x-65))) translateY(-18px) rotate(185deg); }
  68% { transform:translateX(calc(-50% + var(--dice-x-85))) translateY(-42px) rotate(250deg); }
  100% { transform:translateX(calc(-50% + var(--dice-x))) translateY(0) rotate(360deg); }
}
@keyframes dice-cube-tumble {
  0% { transform:perspective(180px) rotateX(10deg) rotateY(-8deg) scale(1); }
  35% { transform:perspective(180px) rotateX(190deg) rotateY(120deg) scale(.9,1.08); }
  70% { transform:perspective(180px) rotateX(310deg) rotateY(250deg) scale(1.07,.92); }
  100% { transform:perspective(180px) rotateX(370deg) rotateY(352deg) scale(1); }
}
@media(max-width:820px) {
  .dice-dock { bottom:10px;height:105px; }
  .dice-roll-zone { width:72px;height:72px; }
  .dice-cube { border-radius:16px; }
  .dice-face { inset:11px; }
  .pip { width:9px;height:9px; }
  .roll-callout { bottom:78px; }
  .sector-float-message { min-width:210px;padding:11px 20px; }
  .sector-float-message strong { font-size:19px; }
}

/* --------------------------------------------------------------------------
   Új, tagoltabb Tidyman figura és célmező-függő mozgáskészlet
   -------------------------------------------------------------------------- */
.game-canvas .tidyman {
  width:88px;
  height:100px;
  transform:translate(-50%,-78%);
  transition:left .34s cubic-bezier(.2,.82,.28,1),top .34s cubic-bezier(.2,.82,.28,1);
}
.game-canvas .character-shadow {
  left:15px;
  bottom:3px;
  width:64px;
  height:13px;
  background:rgba(16,19,13,.42);
  transition:.2s;
}
.game-canvas .person {
  left:39px;
  top:4px;
  width:38px;
  height:82px;
  transform-origin:50% 62%;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.38));
}
.game-canvas .person-head {
  left:8px;
  top:0;
  width:21px;
  height:22px;
  display:block;
  overflow:hidden;
  background:radial-gradient(circle at 35% 27%,#414844,#171c19 43%,#080b09 78%);
  border-radius:48% 52% 46% 54%;
  box-shadow:inset -3px -3px 5px #0008;
}
.game-canvas .person-head i { position:absolute;left:5px;top:4px;width:6px;height:4px;border-radius:50%;background:#ffffff35;transform:rotate(-25deg); }
.game-canvas .person-neck { position:absolute;left:14px;top:19px;width:10px;height:8px;background:#121713;border-radius:3px; }
.game-canvas .person-body {
  left:8px;
  top:23px;
  width:23px;
  height:38px;
  background:linear-gradient(110deg,#262e29,#090c0a 65%);
  border-radius:9px 10px 5px 5px;
  transform:none;
  box-shadow:inset 3px 0 4px #414a4433;
}
.game-canvas .person-arm {
  position:absolute;
  top:26px;
  width:7px;
  height:34px;
  background:linear-gradient(90deg,#222a25,#090c0a);
  border-radius:6px;
  transform-origin:50% 4px;
}
.game-canvas .person-arm i { position:absolute;left:-1px;bottom:-4px;width:9px;height:9px;background:#0b0e0c;border-radius:50%; }
.game-canvas .arm-back { left:7px;z-index:-1;transform:rotate(19deg); }
.game-canvas .arm-front { left:27px;transform:rotate(-18deg); }
.game-canvas .person-leg {
  position:absolute;
  top:56px;
  width:9px;
  height:30px;
  background:linear-gradient(90deg,#242c27,#080b09);
  border-radius:6px;
  transform-origin:50% 3px;
}
.game-canvas .person-leg i { position:absolute;bottom:-4px;width:16px;height:8px;background:#080b09;border-radius:7px 9px 4px 4px; }
.game-canvas .leg-back { left:10px;z-index:-1;transform:rotate(9deg); }
.game-canvas .leg-back i { right:-2px; }
.game-canvas .leg-front { left:23px;transform:rotate(-10deg); }
.game-canvas .leg-front i { left:-2px; }
.game-canvas .trash-bin {
  left:1px;
  top:47px;
  width:37px;
  height:43px;
  background:linear-gradient(100deg,#26342c,#0c120e 68%);
  border:1px solid #080c09;
  border-radius:4px 4px 9px 9px;
  box-shadow:inset 5px 0 #3d4b4233,inset -7px 0 #0005,0 4px 5px #0005;
  transform:rotate(-5deg);
  transform-origin:50% 100%;
}
.game-canvas .trash-bin::before { display:none; }
.game-canvas .trash-bin::after { width:9px;height:9px;bottom:-6px;left:3px;box-shadow:23px 0 #101612; }
.game-canvas .trash-bin .bin-lid { position:absolute;left:-3px;right:-3px;top:-5px;height:7px;background:#111813;border-radius:4px; }
.game-canvas .trash-bin i { left:11px;top:13px;font-size:13px;text-shadow:0 0 8px #bde849; }
.motion-streaks { position:absolute;z-index:-1;left:2px;top:38px;width:45px;height:38px;opacity:0; }
.motion-streaks i { position:absolute;right:0;width:34px;height:2px;border-radius:4px;background:linear-gradient(90deg,transparent,#d8fa78);box-shadow:0 0 5px #c8f05e; }
.motion-streaks i:nth-child(1){top:4px}.motion-streaks i:nth-child(2){top:17px;width:44px}.motion-streaks i:nth-child(3){top:31px;width:27px}
.character-idle .person { animation:tidyman-breathe 2.8s ease-in-out infinite; }
.character-idle .trash-bin { animation:bin-idle 3.2s ease-in-out infinite; }
.move-walk .person,.move-stride .person { animation:body-walk .34s ease-in-out infinite alternate; }
.move-walk .arm-front,.move-stride .arm-front { animation:arm-forward .34s ease-in-out infinite alternate; }
.move-walk .arm-back,.move-stride .arm-back { animation:arm-back .34s ease-in-out infinite alternate; }
.move-walk .leg-front,.move-stride .leg-front { animation:leg-forward .34s ease-in-out infinite alternate; }
.move-walk .leg-back,.move-stride .leg-back { animation:leg-back .34s ease-in-out infinite alternate; }
.move-stride .person { animation-duration:.25s;transform:rotate(7deg); }
.move-hop .person { animation:character-hop .34s ease-in-out infinite alternate; }
.move-hop .person-leg { animation:knees-up .34s ease-in-out infinite alternate; }
.move-skip .person { animation:character-skip .4s ease-in-out infinite; }
.move-skip .arm-front { animation:skip-arm .4s ease-in-out infinite alternate; }
.move-tiptoe .person { animation:tiptoe-body .48s ease-in-out infinite alternate; }
.move-tiptoe .person-leg { animation:tiptoe-leg .48s ease-in-out infinite alternate; }
.move-sprint .person { animation:sprint-body .22s ease-in-out infinite alternate; }
.move-sprint .leg-front { animation:leg-forward .22s ease-in-out infinite alternate; }
.move-sprint .leg-back { animation:leg-back .22s ease-in-out infinite alternate; }
.move-sprint .motion-streaks { opacity:1;animation:streak-pulse .25s linear infinite alternate; }
.move-flip .person { animation:reward-flip .7s cubic-bezier(.35,.05,.45,1) infinite; }
.move-celebrate .person { animation:rare-spin .78s cubic-bezier(.3,.05,.45,1) infinite; }
.move-celebrate .arm-front { animation:victory-arm-right .38s ease-in-out infinite alternate; }
.move-celebrate .arm-back { animation:victory-arm-left .38s ease-in-out infinite alternate; }
.character-moving .trash-bin { animation:bin-follow .34s ease-in-out infinite alternate; }
.character-moving.move-flip .trash-bin { animation:bin-chase .7s ease-in-out infinite; }
.character-moving .character-shadow { animation:shadow-hop .34s ease-in-out infinite alternate; }
@keyframes tidyman-breathe{50%{transform:translateY(-1px) scaleY(1.025)}}
@keyframes bin-idle{50%{transform:rotate(-2deg)}}
@keyframes body-walk{to{transform:translateY(-5px) rotate(2deg)}}
@keyframes arm-forward{to{transform:rotate(42deg)}}@keyframes arm-back{to{transform:rotate(-38deg)}}
@keyframes leg-forward{to{transform:rotate(34deg)}}@keyframes leg-back{to{transform:rotate(-31deg)}}
@keyframes character-hop{to{transform:translateY(-18px) rotate(-4deg)}}
@keyframes knees-up{to{height:24px;transform:rotate(30deg)}}
@keyframes character-skip{0%,100%{transform:translateY(0) rotate(-5deg)}45%{transform:translateY(-20px) rotate(8deg)}70%{transform:translateY(-5px) rotate(3deg)}}
@keyframes skip-arm{to{transform:rotate(-55deg)}}
@keyframes tiptoe-body{to{transform:translateY(-7px) rotate(-3deg) scaleY(1.03)}}
@keyframes tiptoe-leg{to{transform:rotate(13deg);height:27px}}
@keyframes sprint-body{from{transform:translateY(-2px) rotate(10deg)}to{transform:translateY(-9px) rotate(14deg)}}
@keyframes streak-pulse{to{transform:translateX(-13px);opacity:.35}}
@keyframes reward-flip{0%{transform:translateY(0) rotate(0)}48%{transform:translateY(-30px) rotate(-190deg)}100%{transform:translateY(0) rotate(-360deg)}}
@keyframes bin-chase{0%,100%{transform:translateY(0) rotate(-8deg)}45%{transform:translateY(-13px) rotate(8deg)}70%{transform:translateY(-3px) rotate(-13deg)}}
@keyframes rare-spin{0%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-25px) rotate(185deg) scale(1.1)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
@keyframes victory-arm-right{to{transform:rotate(-145deg)}}@keyframes victory-arm-left{to{transform:rotate(140deg)}}
@keyframes bin-follow{to{transform:translateY(-7px) rotate(4deg)}}
@keyframes shadow-hop{to{transform:scale(.68);opacity:.48}}
@media(max-width:820px){.game-canvas .tidyman{transform:translate(-50%,-76%) scale(.88)}}