/* Deluxe art direction: pearl craft, visible companions, and an illustrated progress path. */
.speech-tall{display:none}@media(orientation:portrait){.speech-tall{display:block}.speech-wide{display:none}}
.round-star:not(.done) img{filter:brightness(.77) saturate(1.25)}
:root{--row:66px;--ink:#65492e}
.world:after{background:radial-gradient(ellipse at center,#ffefc926,transparent 75%)}
#playfield{grid-template-columns:minmax(190px,1fr) minmax(440px,570px) minmax(190px,1fr);grid-template-rows:86px 1fr 82px;gap:8px;padding:12px 14px}
header{gap:12px;align-items:center}#path{gap:9px;position:relative;padding:0 12px}#path:before{content:'';position:absolute;left:30px;right:30px;top:50%;height:3px;background:linear-gradient(90deg,transparent,#f2db98,transparent);z-index:-1}
#path .level-shell{position:relative;background:none;border:0;border-radius:0;width:58px;height:58px;box-shadow:none;display:block;filter:saturate(.6);opacity:.8}
#path .level-shell img{width:100%;height:100%;object-fit:contain}#path .level-shell b{position:absolute;left:0;right:0;top:50%;text-align:center;font-size:18px;font-weight:900;color:#6c4322;text-shadow:0 1px #fff8d2}
#path .level-shell.active{transform:translateY(-3px) scale(1.17);filter:drop-shadow(0 3px 6px #ffdf76);opacity:1}#path .level-shell.done{filter:sepia(.25) saturate(1.6);opacity:1}
#rounds{gap:3px;padding:10px 12px;border-radius:26px;background:#fff9e8bd;box-shadow:inset 0 1px 2px #fff,0 4px 12px #365d4930}
.round-star{width:29px;height:29px;display:block}.round-star img{width:100%;height:100%;object-fit:contain}.round-star.current{filter:drop-shadow(0 0 4px #fff1a1)}.round-star.done{animation:arrive .4s ease-out}
.guide{position:relative;align-self:center;gap:0;z-index:2}.guide>button{width:clamp(210px,21vw,290px);height:clamp(230px,25vw,300px);max-width:none;filter:drop-shadow(0 12px 12px #244e493b)}
.speech{border:0;border-radius:0;box-shadow:none;background:none;width:220px;max-width:100%;min-height:116px;padding:24px 18px 20px;filter:drop-shadow(0 6px 5px #6b573a30);isolation:isolate}
.speech:before{display:none}.speech-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}.speech p{font-size:19px;line-height:1.2;margin:4px 0 0;color:#61492f}#cue{height:37px}#cue img{height:37px;width:37px}
.hero{align-self:center;position:relative;z-index:2;padding:0;margin-top:100px;pointer-events:none}.hero img{width:clamp(240px,25vw,330px);max-width:none;max-height:320px;transform-origin:center;position:relative;left:50%;margin-left:calc(clamp(240px,25vw,330px) / -2);filter:drop-shadow(0 16px 12px #23443b35)}
.board{padding:76px 48px 56px;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 15px 12px #23483d48);align-self:center;min-height:0;isolation:isolate}
.board:before{content:'';position:absolute;inset:0;background:url('assets/ui-chart-deluxe.webp') center/100% 100% no-repeat;z-index:-1;pointer-events:none}
#chart{gap:18px;position:relative}.column{padding:5px 9px 6px;background:linear-gradient(110deg,#e6d9c655,#fffaf388);border:2px solid #e0cba8;border-radius:24px;box-shadow:inset 0 2px 5px #a9865430,0 2px 0 #fffefa}
.stack{height:calc(4 * var(--row));border:0;border-bottom:3px solid #c7a265;background:repeating-linear-gradient(to top,#efe3cd55 0,#fff8ecbb 3px,#fff9ef88 calc(var(--row) - 3px),#d7b78688 calc(var(--row) - 2px),#fffaf8 var(--row));border-radius:14px 14px 4px 4px;box-shadow:inset 0 1px 6px #a8843e15}
.slot{width:var(--row);height:var(--row);position:relative}.slot:before{content:'';position:absolute;inset:5px;border-radius:50%;background:radial-gradient(#fffdf5,transparent 72%);z-index:-1}.slot img{width:98%;height:98%;filter:drop-shadow(0 3px 2px #8f725638)}
.category{height:48px;border-radius:0 0 15px 15px;background:linear-gradient(#f3e4caaa,#fff7e2cc);gap:8px}.category img{width:42px;height:42px;filter:drop-shadow(0 2px 1px #a78b5b55)}.category b{font-size:22px}
.column.selected{background:linear-gradient(#ffe8b1,#fff9e5);border-color:#d4a34a;box-shadow:0 0 0 3px #ffedb9,0 0 20px #f8d8887a,inset 0 1px 3px #fff}.success .column.selected{filter:drop-shadow(0 0 8px #ffde73)}
#tray{margin:12px 0 0;min-height:64px;gap:24px}#tray button{width:86px;height:64px;border-radius:24px;border:2px solid #d9b67c;background:radial-gradient(ellipse at 50% 20%,#fffdf4,#ebd4ad);box-shadow:inset 0 2px 2px #fff,0 5px 0 #bb955d80,0 8px 9px #77532620}#tray button img{width:54px;height:54px}#tray small{border:1px solid #d6b47c;background:#fff9e9;right:4px;bottom:3px;min-width:22px;line-height:20px;padding:0 4px}
#relations{height:64px;margin-top:12px;gap:18px}#relations button{height:64px;border-radius:24px;background:linear-gradient(#fffef7,#eedcb9);box-shadow:inset 0 2px 0 #fff,0 4px 0 #b68d4a55}
footer{position:relative;gap:18px}.check{filter:drop-shadow(0 5px 6px #5b602d44)}#undo,#skip{background:linear-gradient(#fff8df,#e5c692);box-shadow:inset 0 2px 0 #fff9e2,0 4px 0 #9c73484d}
.panel{background:radial-gradient(ellipse at top,#fffdf2,#f0dfbc);border-color:#dec398;box-shadow:inset 0 0 0 2px #fff3d5,0 14px 0 #62462a44}
#level-buttons button{position:relative;border:0;border-radius:0;background:none;box-shadow:none;width:70px;height:70px;padding:0}#level-buttons button img{width:100%;height:100%}#level-buttons button b{position:absolute;top:51%;left:0;right:0;font-size:20px}#level-buttons button:disabled{opacity:.45;filter:grayscale(.7)}
@media(orientation:portrait){
 :root{--row:49px}#playfield{grid-template-columns:1fr;grid-template-rows:110px 132px 1fr 126px;padding:8px 8px;gap:4px}header{height:110px;align-items:start}nav{gap:8px;margin-left:auto}#path{top:60px;right:0;padding:0 3px;gap:3px}#path .level-shell{width:42px;height:44px}#path .level-shell b{font-size:15px;top:49%}#rounds{top:69px;left:2px;padding:5px 7px;gap:1px}.round-star{width:22px;height:22px}
 .guide{grid-row:2;flex-direction:row;align-self:center;justify-content:flex-start;margin:0;gap:0;padding:0 6px}.guide>button{width:126px;height:132px;flex:none;filter:drop-shadow(0 7px 6px #264b4430)}.speech{width:calc(100% - 119px);max-width:none;min-height:98px;padding:15px 13px 12px 21px;margin-left:-6px}.speech p{font-size:17px;line-height:1.15}#cue{height:32px;font-size:26px}#cue img{width:32px;height:32px}
 .board{grid-row:3;max-width:410px;width:100%;padding:54px 34px 40px;align-self:center}.column{border-radius:18px;padding:3px 5px 3px}#chart{gap:12px}.stack{height:calc(4 * var(--row))}.category{height:40px}.category img{width:35px;height:35px}.category b{font-size:20px}#tray{gap:18px;margin-top:10px;min-height:56px}#tray button{width:78px;height:56px;border-radius:19px;padding:2px}#tray button img{width:48px;height:48px}#relations{height:56px;margin-top:10px;gap:12px}#relations button{width:110px;height:56px;border-radius:18px;font-size:26px;gap:10px}
 .hero{position:absolute;right:0;bottom:8px;margin:0;width:160px;height:126px;align-self:auto}.hero img{width:160px;height:126px;max-height:none;left:0;margin:0;filter:drop-shadow(0 7px 6px #38524630)}footer{grid-row:4;grid-column:1;width:calc(100% - 190px);min-width:120px;margin:0 0 0 56px;justify-content:center;align-self:center;gap:10px}.check{width:72px;height:72px}#undo{width:48px;height:48px;flex:none}#skip{position:fixed;left:12px;top:10px;width:48px;height:48px;font-size:26px;z-index:4}.corner-rune{width:44px;height:52px}
 #level-buttons button{width:58px;height:60px}#level-buttons button b{font-size:18px}.level-grid{gap:5px}
}
@media(orientation:portrait) and (max-height:720px){
 :root{--row:37px}#playfield{grid-template-rows:104px 98px 1fr 90px;gap:2px;padding:6px}header{height:104px}#path{top:58px}#rounds{top:68px}.guide{padding:0 3px}.guide>button{width:110px;height:104px}.speech{width:calc(100% - 101px);min-height:86px;padding:12px 11px 11px 21px}.speech p{font-size:16px}#cue{height:27px}.board{padding:44px 29px 31px}.category{height:36px}.category img{width:32px;height:32px}#tray{margin-top:7px;min-height:50px}#tray button{height:50px;width:72px}#tray button img{height:43px;width:43px}#relations{height:50px;margin-top:7px}#relations button{height:50px;width:104px}.hero{width:134px;height:102px;bottom:2px}.hero img{width:134px;height:102px}footer{margin-left:58px;width:calc(100% - 200px);gap:8px}.check{width:66px;height:66px}.panel>img{height:155px}
}
@media(orientation:portrait){#playfield{grid-template-columns:minmax(0,1fr)}#path{position:absolute}.board{min-width:0}header{min-width:0}}
@media(prefers-reduced-motion:reduce){.round-star.done{animation:none}}

/* Keep the level path at the actual screen center, independent of side controls. */
header{position:relative}nav{margin-left:auto}
#path{position:absolute;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:max-content}
#rounds .round-star.done{background:none}
@media(orientation:portrait){
 #path{top:60px;transform:translateX(-50%)}
 #rounds{top:17px;left:0;padding:5px 4px;gap:1px}
 .round-star{width:19px;height:22px}
}
@media(orientation:portrait) and (max-height:720px){#path{top:58px}}

/* Board undo uses the supplied UI artwork, like the global replay control. */
#undo{padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 3px #67432130)}
#undo:disabled{filter:saturate(.4);opacity:.55}

/* The demonstration skip uses the same supplied next button as level rewards. */
#skip{padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 3px #67432130)}
#skip:disabled{filter:saturate(.4);opacity:.55}

/* Preserve notch/home-indicator insets after the Deluxe layout overrides. */
#playfield{padding-top:max(12px,env(safe-area-inset-top));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left))}
@media(orientation:portrait){#playfield{padding-top:max(8px,env(safe-area-inset-top));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left))}}
@media(orientation:portrait) and (max-height:720px){#playfield{padding-top:max(6px,env(safe-area-inset-top));padding-right:max(6px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:max(6px,env(safe-area-inset-left))}}
