/* Illustrated assets throughout the HUD, menus and rewards. */
img{image-rendering:auto}
.skip-example{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:64px;height:64px;z-index:1000}
.skip-example[hidden]{display:none!important}
.world{filter:saturate(.92) brightness(.94)}
.wash{background:linear-gradient(180deg,#124b5508,#123d4926)}
.level-path{gap:7px;padding:4px 12px;border:2px solid #f6deb0;background:linear-gradient(145deg,#866038ed,#513b28ed);box-shadow:inset 0 1px 0 #fff2ca70,0 5px 12px #153c4538}
.node,.node.done,.node.current{width:45px;height:45px;border:0;border-radius:0;background:none;box-shadow:none;position:relative}
.node .level-feather{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #38271855)}
.node:not(.done):not(.current) .level-feather{filter:grayscale(.8);opacity:.52}
.node.current .level-feather{filter:drop-shadow(0 0 5px #ffdb66)}
.node small{right:-2px;bottom:0;min-width:16px;line-height:16px;font-size:11px;background:#fff3d4;color:#5c3d21;box-shadow:0 2px 3px #33251655}
.path-wrap{gap:2px}
.rounds{gap:5px;padding:0 7px;border-radius:20px;background:#245b60c9;box-shadow:inset 0 1px 2px #123e4b40}
.round{width:32px;height:28px;font-size:0;line-height:0;-webkit-text-stroke:0;background:none!important;border:0}
.round img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.15);filter:drop-shadow(0 2px 2px #234c4966)}
.jar{background:linear-gradient(145deg,#fff4d5,#dbb877);border:3px solid #fff4d9;box-shadow:inset 0 1px 4px #ffffff80,0 5px 0 #855b36}
.jar-star{display:block;width:90%;height:90%;object-fit:contain;transform:translateY(-3px);filter:drop-shadow(0 2px 2px #88501855)}
.jar-count{width:36px;height:21px;bottom:0;right:0;border-radius:11px;font-size:12px;box-shadow:0 1px 2px #55341a60}
.level-pick{position:relative;background:linear-gradient(145deg,#fff3d6,#e5c693);border:3px solid #fff6de;box-shadow:0 5px 0 #997047}
.level-pick img{width:90%;height:90%;object-fit:contain}
.level-pick span{position:absolute;right:1px;bottom:0;width:25px;height:25px;line-height:25px;font-size:18px;border-radius:50%;background:#744d2c;color:#fff7df}
.demo-hand{width:78px;height:78px;font-size:0;transform:translate(-50%,-50%);animation:art-target 1.8s ease-in-out infinite}
.demo-hand img{width:100%;height:100%;object-fit:contain}
@keyframes art-target{50%{transform:translate(-50%,-50%) scale(1.12)}}
.board{background:linear-gradient(145deg,#fffae9f5,#f1dfbaf5);box-shadow:0 9px 0 #70492b40,0 18px 32px #153e4938,inset 0 0 0 4px #fffdf1b0}
.group{background:radial-gradient(ellipse at 40% 25%,#fffaf0,#efdcc1);box-shadow:inset 0 -6px 10px #ad7e5126,0 6px 0 #93633e26}
.object.bubble-orange{background:none;border:0;box-shadow:none;border-radius:0;object-fit:contain;filter:drop-shadow(0 4px 3px #99572830)}
@media(orientation:portrait){
 .level-path{gap:6px;padding:3px 10px}.node,.node.current,.node.done{width:31px;height:31px}
 .node small{min-width:13px;line-height:13px;font-size:10px;right:-1px}
 .round{width:26px;height:23px}.rounds{gap:4px}
 .demo-hand{width:62px;height:62px}
}
@media(orientation:landscape) and (max-height:720px){.node,.node.current,.node.done{width:34px;height:34px}.round{width:25px;height:22px}}

/* Two illuminated protagonists and two illustrated counting shells. */
.board{border:0;background:none;box-shadow:none;padding:0;border-radius:0;gap:10px;min-height:0}
.compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;position:relative}
.group{border:0;border-radius:36%;background:transparent url('juice-assets/counting-shell.png.webp') center/100% 100% no-repeat;box-shadow:none;padding:18% 15%;filter:drop-shadow(0 9px 7px #17434a40)}
.group.hint,.juice-on .group.hint{box-shadow:none;filter:drop-shadow(0 0 9px #ffe59d)}
.group.correct{box-shadow:none;filter:drop-shadow(0 0 12px #ffd35c)}
.group[data-item="bubbleOrange"]{padding:18% 15%;gap:5px}
.divider[hidden]{display:none!important}
.equality-task .compare{gap:54px}
.divider{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;animation:none!important}
.divider:active{transform:translate(-50%,-50%) scale(.96)}
.prompt-icon{justify-self:center;background:#fff8e9ed;border:2px solid #e6c98b;border-radius:22px;padding:5px 20px;height:48px;box-shadow:0 3px 8px #204e4930;font-size:24px}
.speech{border:2px solid #e7c887;border-radius:28px!important;box-shadow:0 5px 12px #17434a25;background:#fff9e9;line-height:1.25;font-weight:800;text-align:center;justify-content:center}
.speech::after{display:none}
.lumi-btn img,.nesa{filter:brightness(1.08) saturate(1.06) drop-shadow(0 0 16px #fff2bb70) drop-shadow(0 8px 5px #1c4f4a40)!important}
.guide{top:130px;right:25px;width:270px;display:flex;flex-direction:column-reverse;gap:8px}
.lumi-btn{width:200px;height:190px;margin:0;align-self:center}
.speech{width:100%;min-height:80px;font-size:16px;padding:14px 18px}
.nesa-zone{right:28px;bottom:95px;width:230px;height:220px}
.stage{left:90px;right:310px;top:150px;bottom:110px}
@media(orientation:portrait){
 .guide{--hero:clamp(110px,20vw,180px);left:12px;right:12px;top:150px;width:auto;transform:none;display:block;height:clamp(135px,23vw,200px)}
 .lumi-btn{position:absolute;left:0;top:0;width:var(--hero);height:clamp(135px,23vw,200px)}
 .speech{position:absolute;left:calc(var(--hero) + 2px);right:calc(var(--hero) + 2px);top:12px;width:auto;min-height:80px;padding:10px 8px;font-size:clamp(12px,2vw,18px);border-radius:22px!important}
 .nesa-zone{right:6px;top:152px;bottom:auto;width:clamp(116px,21vw,188px);height:clamp(135px,23vw,200px);z-index:34}
 .stage{top:clamp(285px,calc(155px + 25vw),365px);bottom:96px;left:8px;right:8px}
 .board{border:0;padding:0;max-height:none;grid-template-rows:auto minmax(0,1fr)}
 .compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 .equality-task .compare{gap:44px}
 .group{padding:20% 14%;border:0;gap:4px}
 .group[data-item="bubbleOrange"]{padding:20% 14%;gap:4px}
 .prompt-icon{height:34px;font-size:18px;padding:3px 14px}.prompt-icon .mini{width:25px;height:25px}
 .group .object,.group .object.star{max-width:100%;max-height:70px}
}
@media(orientation:portrait) and (max-height:700px){
 .guide{top:139px;height:114px}.lumi-btn{height:114px}.nesa-zone{top:143px;height:110px}
 .speech{top:8px;min-height:74px;font-size:11.5px}
 .stage{top:265px;bottom:88px}.prompt-icon{display:none}.board{grid-template-rows:minmax(0,1fr)}
 .group .object,.group .object.star{max-height:52px}
}

/* One control row; Lumi carries the instruction without a duplicate badge. */
.game-shell{--controls-left:max(12px,env(safe-area-inset-left));--controls-top:max(12px,env(safe-area-inset-top));--controls-gap:8px}
.hud{left:var(--controls-left);top:var(--controls-top)}
#globalSoundBtn{left:calc(var(--controls-left) + var(--hud-control) + var(--controls-gap));right:auto;top:var(--controls-top);bottom:auto}
#homeBtn{left:calc(var(--controls-left) + 2 * (var(--hud-control) + var(--controls-gap)));right:auto;top:var(--controls-top);bottom:auto}
.prompt-icon{display:none!important}
.board{grid-template-rows:minmax(0,1fr);gap:0}
.speech{background:linear-gradient(145deg,#fffdf3,#fff0d1);border-color:#ecd3a1;box-shadow:inset 0 2px 0 #ffffffd9,0 6px 15px #19454b25;font-weight:750}
@media(orientation:portrait){
 .path-wrap{top:calc(var(--hud-control) + 8px)}
 .board{grid-template-rows:minmax(0,1fr)}
}