/* Local art-direction pass. Canonical illustrations and gameplay remain the source. */
/* Cached scene updates stay visible instead of flashing a loading notice per tap. */
#game[data-has-painted="true"][data-ready="loading"] #screen-content{visibility:visible}
#game[data-has-painted="true"][data-ready="loading"]:after{display:none}
.task-stars{background:#fff7e6;border-color:#b99056;box-shadow:0 2px 7px #4b301b20}
.task-stars img[alt="Empty star"]{filter:brightness(.63) sepia(.25)}
.icon:disabled{opacity:.82;filter:grayscale(1) drop-shadow(0 2px 2px #51372030)}
.eyebrow{color:#61482f;letter-spacing:1.8px}
.album-frame{background:linear-gradient(140deg,#fff9e8,#efdcad);border-color:#aa804d;box-shadow:0 3px 0 #c09b68,0 6px 0 #7b5838,0 16px 26px #41331830}
.hole{border-color:#9b7b4e;background:#f3e4c6;box-shadow:inset 0 2px 6px #68482430,0 1px 0 #fff8e6}
.hole.active{outline-color:#c7923b;box-shadow:0 0 0 7px #fff5debd,inset 0 2px 5px #71593733}
.hole-stitch{border-color:#8e704e80}
.piece{border-color:#bd965e;box-shadow:0 3px 0 #89633c,0 7px 12px #46301725}
.piece.selected{outline-color:#956929;outline-offset:3px}
.speech{border-color:#b89460;box-shadow:inset 0 2px 0 #fffdf3}
.speech:after{border-color:#b89460}
.drawing-paper{border-color:#ac8552;box-shadow:0 3px 0 #c6a273,0 6px 0 #83603e,0 14px 25px #41331830}
.palette{background:linear-gradient(145deg,#f2dfb4,#dfbf89);border-color:#b78d55;box-shadow:inset 0 2px 0 #fff4d7,0 3px 0 #957045,0 10px 18px #57422a24;border-radius:28px}
.paint-pot{border-color:#b29567;box-shadow:inset 0 2px 1px #fff,0 2px 2px #79542c35}
.paint-pot>span{box-shadow:inset 0 2px 4px #39281a35,inset 0 -1px 1px #fff8}
.paint-pot.chosen{outline-color:#5d4730}
.small-action:disabled{opacity:.72;background:#f2e5ca;color:#765f43;box-shadow:none}
.painting-actions{gap:14px}
.paint-tools .activity-note{font-size:14px}
.coloring-view .activity-heading h1{text-wrap:balance}
/* Fixed inner bounds keep both the card face and the complete brand mark visible. */
.memory-card>img,.memory-card>.card-back{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.memory-card>.card-back{background:linear-gradient(135deg,#f8edcc,#e8d19c);border:1px solid #b89a66;box-shadow:inset 0 0 0 3px #fff7df,inset 0 0 0 4px #cfb781}
.card-back>img{width:38%;height:64%;max-width:48px;object-fit:contain}
.memory-card{border-color:#b38b55;box-shadow:0 3px 0 #91704a,0 7px 13px #55402b24}
.memory-card.face-up:not(.matched){outline:2px solid #d2a245;outline-offset:2px}
.memory-card.matched{box-shadow:0 3px 0 #72835a;outline:none}
.memory-actions .small-action{background:#fff7e5}
.place-card-art{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:5px;background:#ead8b2}
.place-card-art>img:first-child{display:block;width:100%;height:100%;object-fit:cover}
.place-card-art .place-card-hero{position:absolute;right:0;bottom:0;width:75%;height:95%;object-fit:contain;filter:drop-shadow(0 2px 3px #3d2a1840)}
.menu-panel .postcard-card{transform:none;border-radius:12px;padding:5px 5px 9px;background:#fffaf0;box-shadow:0 3px 0 #b89a6e,0 5px 10px #382a1720}
.menu-panel .postcard-card:disabled{filter:none;opacity:.64;box-shadow:0 2px 0 #c8bda8}
.menu-panel .postcard-card>span{min-height:0;line-height:1.1;margin-top:7px}
.menu-panel .postcard-card.collected>b{top:-6px;right:-5px}
.modal-panel{border:2px solid #b48d59;box-shadow:inset 0 0 0 4px #fff8e6,inset 0 0 0 5px #d7bd91,0 18px 50px #33271b45}
.modal-actions .icon{border-radius:50%}
.finished-album{border-width:3px;box-shadow:0 4px 0 #ab7f4b,0 8px 0 #755534,0 20px 32px #49341c30}
.finished-album .postcard-card{padding:7px 7px 11px;box-shadow:0 3px 0 #c8ab7e,0 6px 12px #382a1720}
.finished-album .postcard-card>.color-drawing{height:auto;aspect-ratio:4/3}
.finished-album .postcard-card>span{min-height:32px;font-size:16px}
.reward-side .highfive{filter:drop-shadow(0 5px 9px #4f361921)}

@media(orientation:landscape){
 .color-studio{grid-template-columns:minmax(0,610px) 275px;gap:32px;width:fit-content;max-width:100%}
 .painting-actions{flex-direction:column;gap:16px}
 .paint-tools{gap:22px}
 .painting-actions .small-action{min-width:160px;justify-content:center}
 .menu-panel{width:min(900px,100%);padding:28px;gap:24px}
 .menu-panel .postcard-card>span{font-size:17px;min-height:36px}
 .menu-panel .place-card-art{aspect-ratio:1.15}
}
/* Short landscape (e.g. 1024x600): the studio, palette and the three coloring
   actions stay in one row so the green finish OK stays on screen. */
@media(orientation:landscape) and (max-height:700px){
 .coloring-view{padding:0 22px 10px;gap:8px}
 .coloring-view .activity-heading{gap:12px}
 .coloring-view .activity-heading>img{height:58px}
 .coloring-view .activity-heading h1{font-size:22px}
 .coloring-view .activity-heading p{font-size:14px;margin-top:2px;padding:3px 9px}
 .coloring-view .color-studio{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
 .coloring-view .drawing-paper{max-width:calc((100dvh - 240px)*1.33333);padding:7px}
 .coloring-view .paint-tools{gap:10px}
 .coloring-view .palette{grid-template-columns:repeat(4,48px);gap:6px;padding:8px 10px}
 .coloring-view .paint-pot{width:48px;height:48px}
 .coloring-view .painting-actions{flex-direction:row;flex-wrap:nowrap;gap:8px}
 .coloring-view .painting-actions .small-action{min-width:0;font-size:14px;padding:2px 8px 2px 4px}
 .coloring-view .painting-actions .small-action>img{width:36px;height:36px}
 .coloring-view .paint-tools .activity-note{font-size:12px;padding:2px 9px}
}
/* Short landscape phones (e.g. 844x390, 667x375): the shell never scrolls, so
   the helper line drops and the palette, actions and heading tighten up until
   the picture and every tool sit inside the viewport. */
@media(orientation:landscape) and (max-height:430px){
 .coloring-view{padding-bottom:2px;gap:4px}
 .coloring-view .activity-heading{gap:10px}
 .coloring-view .activity-heading>img{height:40px}
 .coloring-view .activity-heading h1{font-size:19px}
 .coloring-view .activity-heading p{font-size:12px;margin-top:1px;padding:2px 8px}
 .coloring-view .activity-note{display:none}
 .coloring-view .paint-tools{gap:6px}
 .coloring-view .palette{gap:5px;padding:6px 9px}
 .coloring-view .painting-actions{gap:6px}
 .coloring-view .painting-actions .icon{width:52px;height:52px}
}
@media(orientation:portrait){
 .speech{font-size:16px;line-height:1.22;padding:12px 9px}
 .palette{border-radius:25px}
 .paint-tools .activity-note{font-size:13px}
 .memory-view .activity-heading>div{min-width:0}
 .memory-view .activity-heading p{font-size:15px;line-height:1.25}
 .memory-card>img,.memory-card>.card-back{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
 .memory-card>.card-back{border-radius:5px}
 .menu-panel{gap:13px}
 .menu-panel .album-cards{gap:11px 16px;max-width:310px}
 .menu-panel .place-card-art{height:88px;aspect-ratio:auto}
 .menu-panel .postcard-card>span{font-size:14px}
 .finished-album .postcard-card{padding:5px 5px 8px}
 .finished-album .postcard-card>span{font-size:13px;min-height:28px;display:grid;place-items:center}
 .finished-album .postcard-card>.color-drawing{height:auto;aspect-ratio:4/3}
 .finale-view{gap:12px}
 .finale-view .finished-album{max-width:min(100%,calc((100dvh - 528px)/1.125));flex-shrink:0}
}
@media(orientation:portrait) and (max-height:740px){
 .speech{font-size:15px;padding:10px 7px}
 .palette{grid-template-columns:repeat(4,48px);gap:6px;padding:6px 10px}
 .paint-pot,.paint-pot>span{border-radius:50%}
 .coloring-view .color-studio{gap:9px}
 .coloring-view .drawing-paper{max-width:304px}
 .menu-panel .place-card-art{height:58px}
 .menu-panel{gap:10px;padding:15px 13px}
 .menu-panel .album-cards{gap:9px 14px}
 .menu-panel .postcard-card{padding:4px 4px 7px}
 .menu-panel .postcard-card>span{font-size:13px;margin-top:5px}
 .finished-album{padding:17px 12px}
 .finale-view .finished-album{max-width:400px}
 .finished-album .album-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 9px}
 .finished-album .postcard-card{grid-column:span 2;padding:4px 4px 7px}
 .finished-album .postcard-card:nth-child(4){grid-column:2/span 2}
 .finished-album .postcard-card:last-child{grid-column:4/span 2;width:auto;justify-self:stretch}
 .finished-album .postcard-card>span{font-size:12px;min-height:28px}
 .finished-album .postcard-card>b{width:20px;height:20px;top:-7px;right:-5px;font-size:14px}
 .finale-view{gap:14px}
}