/* Illustrated material system. Local to Pevo; no changes to other games. */
img,canvas { image-rendering:auto; }
.fx-pevo .fx-body,.fx-ori .fx-body { clip-path:none; }
.fx-performer { filter:drop-shadow(0 6px 5px #70452230); }
.wood-btn,.play-btn,.skip-demo { font-size:0; color:transparent; border:0; padding:0; background:transparent var(--button-art) center/contain no-repeat; box-shadow:none; filter:drop-shadow(0 4px 3px #51352240); }
.wood-btn:active,.play-btn:active,.skip-demo:active { background-image:var(--button-pressed,var(--button-art)); box-shadow:none; }
.wood-btn:focus-visible,.play-btn:focus-visible,.skip-demo:focus-visible { outline:4px solid var(--wm-plum);outline-offset:3px; }
.skip-demo { width:48px;height:48px;border-radius:50%; }
.confirm-btn:disabled { opacity:.85;filter:grayscale(1); }
.progress { gap:3px; }
.progress-dot { width:38px;height:38px;background-size:140% 140%;filter:drop-shadow(0 1px 1px #91603885); }
.progress-dot.done { background-size:140% 140%;filter:drop-shadow(0 2px 2px #ba832845); }
.level-path { gap:10px; }
.level-node,.level-node.current { width:40px;height:44px; background:transparent;outline:0; }
.level-node img { width:42px;height:42px;object-fit:contain;opacity:.6;filter:grayscale(.9) sepia(.15); }
.level-node.done { background:transparent; }
.level-node.done img { opacity:1;filter:drop-shadow(0 2px 2px #81582740); }
.level-node.current img { opacity:1;filter:drop-shadow(0 0 4px #edb636);transform:scale(1.12) rotate(-7deg); }
.level-node b { background:#fffae9;border:1px solid #c09355;box-shadow:0 1px 2px #80502135; }
.board,.panel,.finale .panel,.answer-card,.progress,.level-path {
 border:0; background:transparent;box-shadow:none;isolation:isolate;
}
.board::before,.panel::before,.answer-card::before,.progress::before,.level-path::before {
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 border:20px solid transparent;border-image:url('assets/ui-cream-wood-panel.png.webp') 8% fill / 30px / 0 stretch;
 filter:drop-shadow(0 5px 4px #69411e30);
}
.progress,.level-path { position:relative; }
.progress::before,.level-path::before { border-image-width:17px; }
.answer-card { border-radius:20px;text-shadow:0 1px #fff; }
.answer-card::before { border-image-width:16px; }
.juice-ready .answer-card.selected::before { inset:0;opacity:1;border-radius:inherit;border:20px solid transparent;border-image:url('assets/ui-cream-wood-panel.png.webp') 8% fill / 16px / 0 stretch; }
.answer-card.selected { box-shadow:0 0 0 4px #f2c141,0 6px 12px #895b3130; }
.object-group { border:1px solid #c4a36e;border-radius:24px;background:radial-gradient(ellipse at 40% 20%,#fff8e4,#f0ddba);box-shadow:inset 0 2px 4px #99744520,0 2px 0 #fff9e4; }
.missing-group { border:2px dashed #b29568; }
.menu-level { position:relative;display:grid;place-items:center;background:#fff4d5;border:2px solid #cca269;border-radius:18px;box-shadow:0 4px 0 #a3794840; }
.menu-level img { width:90%;height:90%;object-fit:contain; }
.menu-level span { position:absolute;right:1px;bottom:0;font-size:20px;background:#fff8e6;border-radius:50%;width:25px;line-height:25px; }
.speech { border-width:2px;border-color:#c79b60;box-shadow:inset 0 2px 4px #fff,0 5px 10px #70492220;background:linear-gradient(135deg,#fffdf0,#faeac6); }
.speech::after { border-width:2px;background:#fbefd3; }
.shell-object { filter:drop-shadow(0 3px 2px #84593335); }
@media (max-width:760px),(orientation:portrait) {
 .progress { gap:2px;padding:5px 7px; }
 .progress-dot { width:28px;height:28px; }
 .level-path { gap:10px; }
 .level-node,.level-node.current { width:32px;height:33px; }
 .level-node img { width:33px;height:33px; }
 .board::before { border-image-width:24px; }
 .panel::before { border-image-width:16px; }
 .answer-card::before,.juice-ready .answer-card.selected::before { border-image-width:12px; }
 .menu-level span { font-size:16px;width:20px;line-height:20px; }
}
#playBtn,#resumeBtn { --button-art:url("../assets/ui/button-play-normal.webp"); --button-pressed:url("../assets/ui/button-play-pressed.webp"); }
#homeBtn,#exitBtn,#rewardHomeBtn { --button-art:url("../assets/ui/button-home-normal.webp"); --button-pressed:url("../assets/ui/button-home-pressed.webp"); }
#nextBtn,#skipDemo { --button-art:url("../assets/ui/button-next-normal.webp"); --button-pressed:url("../assets/ui/button-next-pressed.webp"); }
[data-sound][aria-pressed="true"] { --button-art:url("../assets/ui/button-mute-normal.webp"); --button-pressed:url("../assets/ui/button-mute-pressed.webp"); }
[data-sound][aria-pressed="false"] { --button-art:url("../assets/ui/button-volume-normal.webp"); --button-pressed:url("../assets/ui/button-volume-pressed.webp"); }
#restartBtn,#menuRestartBtn,#replayBtn { --button-art:url("../assets/ui/button-replay-normal.webp"); --button-pressed:url("../assets/ui/button-replay-pressed.webp"); }
/* Keep content clear of the illustrated inner wooden lip. */
.board { padding-top:28px; }
.progress::before,.level-path::before { border-image-width:14px; }
@media (max-width:760px),(orientation:portrait) { .board { padding-top:22px; } }
@media (max-height:700px) and (orientation:portrait) { .board { padding-top:12px; } }