/* Resolution-independent board finish, preserving the scale coordinate space. */
.board{border:3px solid #b9844d!important;border-radius:34px!important;background:radial-gradient(ellipse at 50% 26%,#fffef8 10%,#fff9e9 66%,#f5e6c7 100%);box-shadow:0 3px 0 #87552e,0 12px 28px #49311b26,inset 0 0 0 5px #fff8e6,inset 0 0 0 6px #d8b985}
.board::before{inset:10px;border:1px solid #dbc39766;border-radius:23px}.board::after{content:none}
.board .board-label{border:0;background:none;box-shadow:none;color:#71502f;min-height:34px;padding:6px 12px;font-weight:700;letter-spacing:.015em}
.board .scale-sprite{filter:drop-shadow(0 8px 7px #63451f1c);image-rendering:auto}
.board .tray{gap:12px!important;padding:8px 4px 5px!important}
.board .treasure{border:2px solid #d4b27c;border-radius:22px;background:linear-gradient(160deg,#fffefa,#fff7e4);box-shadow:0 3px 0 #b38a53,0 5px 10px #6d4b2920,inset 0 1px 0 #fff;filter:none}
.board .treasure.selected{border-color:#d9a329;outline:3px solid #f2c141;outline-offset:2px;background:linear-gradient(150deg,#fffdf1,#fff0be);filter:none}
.board .treasure .weighted-item:only-child .object{width:64px!important;height:58px!important;max-width:100%}
.board .object{filter:drop-shadow(0 3px 2px #62482726);image-rendering:auto}
.board .feedback{border-width:1px;box-shadow:0 3px 10px #60432215}
@media(orientation:portrait){.board{border-radius:28px!important}.board .board-label{font-size:16px!important}.board .tray{gap:10px!important}.board .treasure{border-radius:18px}.board .treasure .weighted-item:only-child .object{width:58px!important;height:52px!important}}
@media(orientation:portrait) and (max-height:700px){.board .board-label{font-size:14px!important;min-height:26px}.board .treasure .weighted-item:only-child .object{width:46px!important;height:40px!important}.board .tray{padding:4px!important}}

/* Character lighting follows the transparent silhouette, not a rectangular card. */
.guide,.hero,.intro-lumi,.intro-kuvi{filter:brightness(1.07) contrast(1.06) drop-shadow(0 0 2px #fff9de) drop-shadow(0 0 13px #fff0bca6) drop-shadow(0 7px 5px #163d5077)!important;object-fit:contain}
@media(orientation:landscape){
 .play-grid{grid-template-columns:clamp(180px,19vw,255px) minmax(430px,720px) clamp(180px,19vw,255px)!important;gap:14px!important}
 .guide{width:100%!important;max-height:290px!important}.hero{width:100%!important;max-height:350px!important}
 .hero-zone{min-width:0}.guide-zone{min-width:0}
}

@media(orientation:portrait){
 .play-grid{grid-template-rows:145px minmax(0,1fr)!important}
 .guide-zone{grid-template-columns:100px minmax(0,1fr)!important;padding-right:96px;gap:3px!important}
 .guide{width:100px!important;max-height:135px!important}
 .hero-zone{top:5px!important;right:0!important}.hero{width:94px!important;max-width:none!important;max-height:135px!important}
 .speech{min-height:90px!important;padding:12px 10px!important}.prompt-text{font-size:14px!important;line-height:1.25!important}
}
@media(orientation:portrait) and (max-width:400px){.guide-zone{grid-template-columns:86px minmax(0,1fr)!important;padding-right:82px}.guide{width:86px!important}.hero{width:80px!important}}
@media(orientation:portrait) and (max-height:700px){
 .play-grid{grid-template-rows:114px minmax(0,1fr)!important}.guide{max-height:105px!important}.hero{max-height:108px!important}.speech{min-height:88px!important}.prompt-text{font-size:13px!important}
}

/* Kuvi's square source has wide transparent side margins. Cover a tall box
   to remove those margins visually without stretching or cutting the silhouette. */
.hero-zone{isolation:isolate}
.hero-zone::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#fff4d4b8 0%,#e6f8ee73 42%,transparent 72%)}
.guide{background:radial-gradient(ellipse,#fff5d6a6 0%,#e9fff04d 40%,transparent 70%)}
@media(orientation:landscape){
 .hero{width:100%!important;height:390px!important;max-height:48vh!important;object-fit:cover!important}
 .guide{width:100%!important;max-height:310px!important}
}
@media(orientation:portrait){
 .play-grid{grid-template-rows:174px minmax(0,1fr)!important}
 .guide-zone{grid-template-columns:112px minmax(0,1fr)!important;padding-right:108px}
 .guide{width:112px!important;max-height:155px!important}
 .hero-zone{width:104px;top:0!important;display:grid;place-items:center}
 .hero{width:104px!important;height:166px!important;max-height:166px!important;object-fit:cover!important}
 .speech{padding:12px 8px!important}
}
@media(orientation:portrait) and (max-width:400px){
 .guide-zone{grid-template-columns:94px minmax(0,1fr)!important;padding-right:92px}.guide{width:94px!important}
 .hero-zone{width:88px}.hero{width:88px!important;height:154px!important;max-height:154px!important}
}
@media(orientation:portrait) and (max-height:700px){
 .play-grid{grid-template-rows:142px minmax(0,1fr)!important}.hero{height:138px!important;max-height:138px!important}.guide{max-height:126px!important}
}

@media(orientation:landscape){.hero-zone{position:relative!important;inset:auto!important;align-self:center}}

#intro{background:#51b9cc!important}#intro .intro-shade{display:none}
#intro .opening-illustration{display:block;position:absolute;inset:0;width:100%;height:100%}
#intro .opening-illustration img{display:block;width:100%;height:100%;object-fit:contain;filter:none}

/* Illustrated playfield replaces the rejected cream task panel. */
.board{background:#b7e0db url('assets/task-underwater-clearing.webp') center/cover no-repeat!important;border:0!important;border-radius:30px!important;box-shadow:0 10px 28px #103e5140,inset 0 0 0 2px #fff8e680!important;padding:14px!important}
.board::before,.board::after{content:none!important}
.board .board-label{background:#fff9e7ed;border:1px solid #fffdf1;border-radius:14px;box-shadow:0 3px 10px #15465718;color:#51422e;min-width:0;max-width:95%;padding:7px 20px}
.board .tray{background:linear-gradient(180deg,#f7e8c99e,#e1bd859e);border:1px solid #fff8e6cc;border-radius:24px;padding:10px!important;box-shadow:0 4px 12px #83613720;gap:12px!important}
.board .treasure{background:linear-gradient(145deg,#fffef6,#f5e3bc);border:2px solid #fff8e6;box-shadow:0 4px 0 #b18b55,0 6px 9px #6c482825,inset 0 0 0 1px #dac498;border-radius:22px}
.board .treasure.selected{background:linear-gradient(145deg,#fffbe6,#f8d67e);outline:3px solid #f2c141;box-shadow:0 4px 0 #af8036,0 0 16px #f2c14177}
.board .feedback:not(.show){visibility:hidden}
.board .feedback.show{visibility:visible;background:#fff8e6f5;border:2px solid #f2c141;box-shadow:0 4px 16px #74501c20}
@media(orientation:portrait){.board{padding:10px!important;border-radius:26px!important}.board .tray{padding:7px!important;gap:9px!important;border-radius:21px}.board .treasure{border-radius:17px}.board .board-label{padding:5px 12px}}
@media(orientation:portrait) and (max-height:700px){.board{padding:8px!important}.board .tray{padding:5px!important}}

/* One shared underwater stage: no nested scene, panel or duplicate horizon. */
#shell{background-image:url('assets/task-underwater-clearing.webp')!important;background-position:center;background-size:cover}
.board{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible;padding:0!important;grid-template-rows:minmax(0,1fr) auto!important}
.board .board-label{display:none}
.board .tray{background:none;border:0;box-shadow:none;border-radius:0;padding:10px 8px!important;gap:18px!important}
.board .treasure{border-radius:50% 50% 42% 42% / 42% 42% 52% 52%;background:radial-gradient(ellipse at 50% 35%,#fffdf0,#f3e0b6 70%,#d7b578);border:2px solid #fff5d7;box-shadow:0 5px 0 #ba9661,0 10px 15px #74532626,inset 0 0 0 3px #f8ebce}
.board .treasure.selected{background:radial-gradient(ellipse at 50% 35%,#fffdf0,#f7dc87 70%,#dcad48);outline:3px solid #e9b83d;outline-offset:4px;box-shadow:0 5px 0 #ba9661,0 0 24px #f2c14166}
.board .scale-sprite{filter:drop-shadow(0 12px 7px #70512838)!important}
.guide,.hero{filter:brightness(1.025) drop-shadow(0 0 5px #fff8e6aa) drop-shadow(0 8px 7px #17485445)!important}
.hero-zone::before{background:radial-gradient(ellipse,#fff5dc70,transparent 70%)}
.hud>.level-path{background:#fff8e6c9!important;border:1px solid #fff9e5!important;box-shadow:0 3px 8px #26576415!important}
.board .feedback.show{bottom:105px;border:0;border-radius:16px;padding:9px 18px;box-shadow:0 3px 16px #74501c18}
@media(orientation:portrait){
 .play-grid{gap:0!important}.board .tray{gap:14px!important;padding:8px 5px!important}
 .board .treasure{height:80px!important}.board .feedback.show{bottom:104px}
}
@media(orientation:portrait) and (max-height:700px){.board .treasure{height:64px!important}.board .feedback.show{bottom:84px;padding:6px 12px}}

@media(orientation:portrait){#shell{background-image:url('assets/task-underwater-clearing-portrait.webp')!important}}

/* Brighter rim and contact shadow only on the treasures resting on pans. */
.board .pan-bowl .object{filter:brightness(1.12) contrast(1.07) drop-shadow(0 0 1px #fffdf0) drop-shadow(0 0 5px #fff3cbbf) drop-shadow(0 4px 2px #49321f80)!important}


body[data-state="menu"] #game *,body[data-state="menu"] #rewardOverlay *{animation-play-state:paused!important}