/* EcoGlide Quest V9 — immersive, illustrated, responsive arcade UI */
:root{--game-blue:#0862d6;--game-deep:#072c75;--game-green:#1fc370;--game-yellow:#ffdc51}
html{scroll-behavior:auto!important}
body{background:linear-gradient(180deg,#6bcff5 0%,#b3f5ff 35%,#b4f18a 100%)!important;color:#113d68;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('./school-scene.svg') center/cover no-repeat;opacity:.78}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,#1acfff00,#44a2fa22 55%,#0a8b7040)}
.shell{max-width:1480px!important;padding:12px 22px 22px!important}
.topbar{background:linear-gradient(105deg,#ffffffed,#e9fff7ec)!important;box-shadow:0 6px 0 #159dcc38,0 14px 26px #08376a33!important;border:2px solid #ffffff!important;border-radius:20px!important;padding:7px 14px!important;margin-bottom:11px!important}
.logo-mark{background:linear-gradient(145deg,#04d2ab,#006ba5)!important}
.logo-text{color:#068859!important;text-shadow:0 1px #fff;font-size:26px!important}.logo-text span{color:#086ed8!important}.subtitle{color:#0e6590!important}
.chip{background:#e9fff4!important;border:2px solid #67d0c3!important}
.hero{display:flex!important;align-items:center;justify-content:space-between;position:relative;min-height:90px;border:3px solid #ffffff66!important;border-radius:22px!important;background:linear-gradient(105deg,#06418c 5%,#086dc2 57%,#00a9a6 100%)!important;padding:12px 22px!important;box-shadow:0 6px 0 #003779,0 15px 29px #12478c55!important;margin-bottom:13px!important}
.hero h1{margin:2px 0!important;font-size:clamp(22px,3vw,32px)!important;color:#fff!important;letter-spacing:-1px!important}.hero p{display:none!important}
.eyebrow{display:none!important}.score{background:linear-gradient(145deg,#134fc4,#072b92)!important;border:2px solid #a4eaff!important;border-bottom:4px solid #022777!important;border-radius:15px!important;min-width:85px!important;padding:6px 12px!important;text-align:center}.score strong{font-size:26px!important;color:#fff59a!important}.score small{color:#fff!important;font-weight:900!important}
.progressrow{margin-top:3px!important;color:#e4f9ff!important;font-weight:850!important}.progress-track{height:10px!important;border:2px solid #ffffffa1!important;background:#092b6d!important}.progress-fill{background:linear-gradient(90deg,#00e7ad,#ffe052)!important}
.layout.arcade-playfield{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(290px,330px)!important;grid-template-areas:'stage side'!important;gap:14px!important;align-items:stretch!important}
.layout .machine-wrap{grid-area:stage!important;position:relative!important;overflow:hidden!important;border:4px solid #fff!important;background:#c9faff!important;padding:7px!important;box-shadow:0 9px 0 #0a74b9,0 21px 45px #093e7a59!important;border-radius:29px!important;min-width:0}
.layout .side{grid-area:side!important;background:linear-gradient(180deg,#fffefd,#e8faff)!important;border:4px solid #fff!important;box-shadow:0 9px 0 #0a83a7,0 21px 35px #045f8c46!important;border-radius:27px!important;padding:16px 14px!important;display:flex!important;flex-direction:column!important;gap:11px!important}
.arcade-game-label{position:absolute;top:14px;left:15px;z-index:4;display:flex;gap:10px;align-items:center;pointer-events:none;color:#fff;font-size:12px;font-weight:1000;letter-spacing:.9px;text-shadow:0 2px 3px #05455e}
.arcade-game-label>span:first-child{border-radius:100px;padding:7px 11px;background:linear-gradient(130deg,#008ce7,#004dab);box-shadow:0 4px 0 #01327c;border:2px solid #ffffff77}
.hud-sticker{background:#ffe34e;color:#19436d!important;padding:7px 11px;border-radius:90px;box-shadow:0 4px 0 #e8a723;text-shadow:none!important}
.machine-head{display:none!important}
.stage{position:relative!important;overflow:hidden!important;min-height:0;background:linear-gradient(180deg,#8ce0ff55,#e9fffb22),url('./school-scene.svg') center/cover no-repeat!important;border:3px solid #68e3ff!important;border-radius:24px!important;box-shadow:inset 0 0 0 2px #fff7,inset 0 15px 30px #e4faff!important;margin:0!important}
.stage:before{content:'';position:absolute;inset:auto -10% -2% -10%;height:20%;background:linear-gradient(180deg,#79d27f,#32af69);clip-path:ellipse(60% 61% at 50% 100%);pointer-events:none}
.stage .machine{position:relative;z-index:2;max-height:min(63vh,600px)!important;width:100%;height:auto;filter:drop-shadow(0 15px 10px #24564c47)!important}
.arcade-world-title{position:absolute;left:50%;top:16px;transform:translateX(-50%);white-space:nowrap;z-index:3;font-weight:1000;font-size:clamp(12px,2vw,20px);letter-spacing:.8px;color:#fff;text-shadow:-2px -2px #067ac7,2px -2px #067ac7,-2px 2px #067ac7,2px 2px #067ac7,0 4px #00396e;pointer-events:none}
.stage-overlay-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.sparkle{position:absolute;color:#fff87e;font-size:37px;text-shadow:0 0 12px #f9ffad;animation:twinkle 2s ease-in-out infinite alternate}
.sparkle-1{top:20%;left:12%}.sparkle-2{top:30%;right:9%;animation-delay:.8s}.sparkle-3{bottom:24%;left:12%;animation-delay:1.2s}
@keyframes twinkle{0%{opacity:.3;transform:scale(.68) rotate(-20deg)}100%{opacity:1;transform:scale(1.3) rotate(20deg)}}
.stage-mascot{position:absolute;right:5px;bottom:90px;z-index:4;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:mascotBob 2.6s ease-in-out infinite;transform-origin:bottom}
.stage-mascot img{width:clamp(68px,11vw,122px);filter:drop-shadow(0 8px 5px #005e8f44)}
.stage-mascot span{background:#fffbed;padding:5px 8px;border:2px solid #fff;border-radius:12px;color:#07519d;font-size:9px;font-weight:1000;box-shadow:0 5px 0 #ffcc58;white-space:nowrap}
@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.points-pop{position:absolute;z-index:5;top:45%;left:48%;font-size:44px;font-weight:1000;color:#fff056;text-shadow:0 3px 0 #ea8b10,0 6px 6px #001d56;opacity:0;pointer-events:none}
.points-pop.show{animation:scoreBurst .85s both}@keyframes scoreBurst{0%{transform:translate(-50%,30px) scale(.5);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translate(-50%,-100px) scale(1.2);opacity:0}}
.game-shake{animation:gameShake .25s linear}@keyframes gameShake{0%,100%{translate:0}25%{translate:-8px}75%{translate:8px}}
.inventory-header{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:16px;font-weight:1000;color:#084b9b}
.inventory-header small{font-size:10px;font-weight:800;color:#3781a1}
.introbox{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.section-label{display:inline-flex!important;background:#086dde;color:white!important;border-radius:14px;padding:7px 12px;font-size:11px!important}
.challenge-title{font-size:clamp(20px,2.2vw,27px)!important;color:#054399!important;line-height:1.07!important;text-transform:uppercase}
.detail{font-size:12px!important;color:#4f6785!important}
.object-card{position:relative;border:4px solid #fff!important;border-radius:22px!important;background:radial-gradient(circle at 40% 30%,#fffdaf,#fcef90 60%,#ffaf62)!important;box-shadow:0 6px 0 #e5a83f,0 11px 25px #fcb04d40!important;min-height:205px!important;overflow:hidden}
.object-card:after{content:'⭐ ITEM MISTERI ⭐';position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;background:#fff8;padding:5px 10px;border-radius:90px;color:#93612d;font-weight:1000}
.object-card .object-img{z-index:2;transform:scale(1.04);filter:drop-shadow(0 12px 10px #7a471c4f)!important}
.object-name{font-size:19px!important;color:#723d0d!important;text-shadow:0 1px white}
.object-hint{font-size:12px!important;color:#714e29!important}
.status{border-radius:16px!important;background:#e1f7ff!important;color:#12518c!important;border:2px solid #b6e3ff!important;box-shadow:0 4px 0 #7fc9e1!important;font-size:12px!important;min-height:49px}
.status.good{background:#d1ffdf!important;border-color:#62e2a1!important;color:#057343!important}
.status.error{background:#ffe8e4!important;border-color:#f5a495!important;color:#bc341a!important}
.choices{display:flex!important;gap:7px!important}
.choices button{display:inline-flex!important;align-items:center;justify-content:center;min-height:52px!important;border:3px solid #fff!important;border-radius:15px!important;box-shadow:0 5px 0 #07469c45!important;font-weight:1000!important;color:#fff!important;font-size:11px!important;line-height:1.1;flex:1}
.choices button.left{background:linear-gradient(180deg,#38bcfb,#0872ce)!important}
.choices button.right{background:linear-gradient(180deg,#ff8279,#ed4056)!important}
.choices button.center{background:linear-gradient(180deg,#d6a057,#a57434)!important}
.choices button:disabled{opacity:.45}
#releaseButton{display:block!important;background:linear-gradient(180deg,#ffef6e,#ffb71c)!important;color:#633c08!important;font-size:15px!important;font-weight:1000!important;border:3px solid #fff!important;border-radius:19px!important;box-shadow:0 7px 0 #cf8916,0 12px 22px #b07b2040!important;padding:14px!important}
#releaseButton:disabled{background:#d5e4eb!important;color:#7392a6!important;box-shadow:0 5px 0 #9db9c7!important}
#restart{border-radius:14px!important;background:#fff!important;color:#126dbc!important;border:2px solid #b4e0ff!important;font-size:11px!important}
.game-medals{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.game-medals span{background:#e6fff1;border:2px solid #bdecd6;border-radius:100px;color:#08876a;padding:7px 10px;font-size:10px;font-weight:950}
.machine-caption,.hintbar,.pwa-footline,.bottom{display:none!important}
.mobile-item-tray{display:none!important}
.quick-choices{display:none!important}
.tap-hint{display:none!important}
/* modal is a full illustrated game title screen */
.overlay{position:fixed!important;inset:0!important;z-index:70!important;background:#03295ab8!important;backdrop-filter:blur(14px)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:14px!important;overflow:auto!important}
.overlay.hidden,.overlay[hidden]{display:none!important}
.dialog{width:min(930px,100%)!important;max-width:930px!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;border:5px solid #fff!important;border-radius:32px!important;padding:0!important;background:linear-gradient(#80ddff,#c5f9f1)!important;box-shadow:0 0 0 8px #15a9ff55,0 25px 80px #061d5cd9!important}
.arcade-menu{padding:20px 27px 24px;background:radial-gradient(circle at 92% 10%,#fff86d66,transparent 25%),linear-gradient(#8ae3ff88,#c7fff073),url('./school-scene.svg') center/cover no-repeat}
.menu-top{display:flex;justify-content:space-between;gap:9px;align-items:center}.game-mark,.game-pill{font-size:11px;font-weight:1000;border-radius:100px;color:#fff;padding:8px 12px;border:2px solid #fff8;box-shadow:0 4px 0 #0651a7}.game-mark{background:#0858af}.game-pill{background:#ff923a}
.menu-visual{display:flex;min-height:310px;align-items:center;justify-content:space-between;position:relative}.menu-title{position:relative;z-index:2;flex:1}.ready-tag{display:inline-block;margin-bottom:10px;background:#fff46d;color:#194c94;font-weight:1000;border:3px solid #fff;padding:8px 15px;border-radius:13px;box-shadow:0 5px 0 #eca50f;transform:rotate(-2deg)}
.menu-title h2{font-size:clamp(45px,7.5vw,96px)!important;line-height:.88!important;letter-spacing:-3px!important;color:#fff!important;margin:6px 0 7px!important;font-weight:1000!important;-webkit-text-stroke:3px #0952ae;text-shadow:0 5px #043c87,4px 11px #043c8770}
.menu-title h2 strong{color:#faff4e!important;-webkit-text-stroke:3px #129456;text-shadow:0 5px #107b49,0 8px 19px #12548366}
.menu-subtitle{display:inline-block;color:#fff;background:linear-gradient(105deg,#05ad75,#097be5);border-radius:90px;border:3px solid white;padding:7px 20px;font-size:16px;font-weight:1000;box-shadow:0 5px 0 #054b98}
.menu-title p{max-width:500px;color:#075077;font-size:15px;font-weight:850;line-height:1.5;margin-top:13px!important;text-shadow:0 1px #fff}
.menu-hero{width:clamp(170px,29vw,310px);max-height:300px;filter:drop-shadow(0 12px 7px #0d678c7a);animation:mascotBob 2.7s infinite}
.menu-mode-label{text-align:center;font-size:14px;font-weight:1000;color:#03498d;letter-spacing:1.7px;margin:1px 0 8px}
.arcade-modebuttons{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
.arcade-modebuttons .modebutton{position:relative!important;display:grid!important;grid-template-columns:54px 1fr!important;grid-template-rows:auto auto!important;gap:2px 9px!important;text-align:left!important;align-items:center!important;background:#fff!important;border:3px solid #b7d7ed!important;border-bottom:7px solid #79abc8!important;border-radius:20px!important;color:#124b83!important;min-height:90px!important;padding:10px 15px!important;box-shadow:0 9px 25px #0b65923d!important;transform:none!important}
.arcade-modebuttons .modebutton.selected{border-color:#ffe956!important;border-bottom:7px solid #c98e10!important;background:#fffbe2!important;box-shadow:0 0 0 4px #ffda5073,0 10px 20px #b986266b!important}
.mode-emoji{grid-column:1;grid-row:1 / span 2;font-size:33px;display:grid;place-items:center;background:#d8f8ff;border-radius:17px;padding:7px}
.arcade-modebuttons b{font-size:15px;font-weight:1000;line-height:1.1}
.arcade-modebuttons small{grid-column:2;font-size:11px!important;color:#507c9d!important;margin:0!important}
.mode-tag{position:absolute;right:6px;top:-10px;border-radius:100px;background:#17bc89;color:#fff;padding:4px 11px;font-size:9px;font-weight:900;border:2px solid #fff}
.game-start{display:block!important;width:min(440px,100%);margin:18px auto 12px!important;border:4px solid #fff!important;border-bottom:8px solid #cc6b08!important;border-radius:24px!important;padding:16px 20px!important;background:linear-gradient(#fff16b,#ff9b23)!important;color:#713800!important;font-size:23px!important;font-weight:1000!important;box-shadow:0 12px 28px #f5952480!important;animation:buttonGlow 2s ease-in-out infinite}
@keyframes buttonGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.menu-how{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.menu-how span{background:#fff9;color:#07608e;border:1px solid #fff;border-radius:90px;padding:7px 13px;font-size:11px;font-weight:950}
/* v8's finish screen still uses dialog .diagram; make it look like a winner podium */
.dialog:not(:has(.arcade-menu)){padding:30px!important;text-align:center;background:linear-gradient(155deg,#6acef6,#c9f7aa)!important}
.dialog:not(:has(.arcade-menu)) h2{font-size:44px;color:#064e9e}.dialog:not(:has(.arcade-menu)) .action{background:linear-gradient(#ffef70,#ffb327);color:#663d0a;border:3px solid white;border-radius:20px;font-weight:1000;box-shadow:0 7px 0 #c88518}
/* visual interaction affordances */
#itemIcon,#mobileItemIcon{touch-action:none!important;user-select:none;cursor:grab!important}
#itemIcon:active,#mobileItemIcon:active{cursor:grabbing!important;transform:scale(1.1)!important}
#gateL.ready-to-pull,#gateR.ready-to-pull{cursor:grab}
#toast{font-weight:1000!important;font-size:20px!important;background:#fff05b!important;color:#123d90!important;border:3px solid #fff!important;border-radius:25px!important;box-shadow:0 7px 0 #e6b821!important}
@media(max-width:1100px){.layout.arcade-playfield{grid-template-columns:minmax(0,1fr) 285px!important}.stage-mascot img{width:80px}.stage-mascot span{font-size:8px}.shell{padding:11px!important}}
@media(max-width:870px){.layout.arcade-playfield{grid-template-columns:1fr!important;grid-template-areas:'stage' 'side'!important}.layout .side{gap:7px!important}.stage .machine{max-height:475px!important}.menu-visual{min-height:260px}}
@media(max-width:600px){
 body{padding-bottom:0!important;background:linear-gradient(#74d8fb,#dcffca)!important}
 .shell{padding:5px 7px 16px!important}.topbar{margin-bottom:6px!important;padding:5px 8px!important;border-radius:15px!important}
 .logo-text{font-size:20px!important}.subtitle{font-size:9px!important}.logo-mark{height:36px!important;width:36px!important;font-size:21px!important}
 .topbar .install-button{font-size:9px!important;padding:7px 8px!important}.topbar .icon-btn{width:36px!important;height:36px!important}
 .hero{min-height:70px!important;border-radius:17px!important;padding:7px 11px!important;gap:8px!important;margin-bottom:7px!important;box-shadow:0 4px 0 #003779,0 8px 15px #12478c43!important}
 .hero h1{font-size:21px!important}.hero-right{gap:4px!important}.score{min-width:52px!important;padding:4px 7px!important;border-radius:12px!important}.score strong{font-size:19px!important}.score small{font-size:8px!important}.progressrow{font-size:8px!important;margin:2px 0!important}.progress-track{height:7px!important}
 .layout.arcade-playfield{gap:8px!important}.layout .machine-wrap{border-width:3px!important;border-radius:18px!important;padding:4px!important;box-shadow:0 5px 0 #0a74b9,0 10px 18px #093e7a47!important}
 .arcade-game-label{top:7px;left:7px;gap:5px;font-size:8px}.arcade-game-label>span:first-child{padding:4px 7px;border-width:1px}.hud-sticker{padding:4px 7px;font-size:8px}
 .stage{border-radius:13px!important;border-width:2px!important;min-height:0!important}
 .stage .machine{max-height:340px!important;height:auto!important;width:100%!important}
 .arcade-world-title{font-size:10px;top:9px}.stage-mascot{bottom:32px;right:4px}.stage-mascot img{width:55px}.stage-mascot span{display:none}.sparkle{font-size:18px}
 .mobile-item-tray{display:flex!important;position:relative!important;z-index:3;gap:10px!important;background:linear-gradient(105deg,#fff9a2,#ffd28d)!important;border:3px solid #fff!important;border-bottom:5px solid #eeb25d!important;box-shadow:0 6px 20px #9661205e!important;padding:5px 8px!important;border-radius:17px!important;margin-top:7px!important}
 .mobile-source{width:66px!important;height:64px!important;flex:none;background:#fff6!important;border-radius:13px!important;display:flex;align-items:center;justify-content:center}
 .mobile-source svg{width:59px!important;height:59px!important}.mobile-item-text strong{color:#7c4000!important;font-size:15px!important}.mobile-item-text small{color:#835b25!important;font-size:11px!important}
 .quick-choices{display:flex!important;gap:5px!important;margin-top:6px!important}
 .quick-choices button{min-height:48px!important;border-radius:13px!important;border:2px solid white!important;font-size:12px!important;font-weight:1000!important;color:#fff!important;box-shadow:0 4px 0 #003a6380!important}
 #quickLeft{background:linear-gradient(#43bdff,#0569ca)!important}#quickRight{background:linear-gradient(#ff877a,#ef3b49)!important}#quickCenter{background:linear-gradient(#e2b773,#a77438)!important}
 .layout .side{border-radius:16px!important;padding:7px 9px 10px!important;gap:6px!important;border-width:3px!important;box-shadow:0 5px 0 #0a83a7,0 10px 15px #045f8c35!important}
 .inventory-header,.introbox,.object-card,.side .choices,.game-medals,.side .hint,.side .kicker{display:none!important}
 .status{font-size:11px!important;min-height:42px!important;padding:7px 10px!important;margin:0!important;box-shadow:none!important}
 #releaseButton{min-height:50px!important;border-radius:13px!important;padding:10px!important;font-size:14px!important;box-shadow:0 4px 0 #cf8916!important}
 #restart{padding:7px!important;font-size:10px!important;min-height:32px!important}
 .tap-hint{display:block!important;font-size:10px;font-weight:950;text-align:center;margin-top:7px;color:#0860ab}
 .app-dock{display:none!important}.app-sheet{z-index:120!important}
 .dialog{border-width:3px!important;border-radius:22px!important;max-height:calc(100dvh - 16px)!important}
 .overlay{padding:7px!important}.arcade-menu{padding:12px 14px 17px}
 .game-mark,.game-pill{font-size:8px;padding:5px 7px;box-shadow:0 3px 0 #0651a7}
 .menu-visual{min-height:224px}.menu-hero{position:absolute;width:152px;right:-7px;top:12px;opacity:.96}.menu-title{z-index:2}.ready-tag{font-size:9px;padding:5px 9px;border-width:2px}
 .menu-title h2{font-size:clamp(47px,13vw,68px)!important;letter-spacing:-3px!important;-webkit-text-stroke:2px #0952ae;text-shadow:0 4px #043c87}
 .menu-title h2 strong{-webkit-text-stroke:2px #129456}.menu-subtitle{font-size:10px;padding:5px 8px;border-width:2px}.menu-title p{font-size:10px;max-width:225px;line-height:1.35;background:#eafffaaf;padding:5px 7px;border-radius:9px}
 .menu-mode-label{font-size:11px;margin:2px 0 6px}.arcade-modebuttons{gap:7px!important}.arcade-modebuttons .modebutton{min-height:88px!important;padding:8px!important;grid-template-columns:34px 1fr!important;border-width:2px!important;border-bottom-width:5px!important;border-radius:13px!important;gap:4px!important}
 .mode-emoji{font-size:22px;padding:5px;border-radius:9px}.arcade-modebuttons b{font-size:11px!important}.arcade-modebuttons small{font-size:9px!important}.mode-tag{font-size:7px;padding:2px 6px;top:-8px}
 .game-start{font-size:19px!important;margin:13px auto 8px!important;padding:12px!important;border-radius:17px!important;border-width:3px!important;border-bottom-width:6px!important}
 .menu-how{gap:5px}.menu-how span{padding:5px 7px;font-size:8px}
 .dialog:not(:has(.arcade-menu)){padding:16px!important}.dialog:not(:has(.arcade-menu)) h2{font-size:32px!important}
}
@media(prefers-reduced-motion:reduce){.stage-mascot,.menu-hero,.game-start,.sparkle{animation:none!important}}
/* Stable clickable arcade buttons; pulse glow without moving hit target */
.game-start{animation:none!important;transition:filter .18s,box-shadow .18s!important}
.game-start:hover{filter:brightness(1.04)!important}

/* Keep the phone arcade scene compact instead of exposing a long instructional webpage. */
.side p.mini{display:none!important}
.dialog .arcade-victory{margin:8px auto 12px;display:grid;justify-items:center;gap:9px}
.dialog .victory-medal{font-size:36px;letter-spacing:5px;filter:drop-shadow(0 3px 0 #fca513)}
.dialog .victory-label{font-size:17px;font-weight:1000;color:#064c90;background:#fff;border-radius:100px;padding:8px 20px;border:3px solid #54c9ff}
.dialog .victory-stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.dialog .victory-stats span{background:#0d68c4;color:#fff;border:2px solid #fff;border-radius:90px;padding:8px 14px;font-size:12px;font-weight:900}