body{background:#fff0df}header{display:flex;justify-content:space-between;padding:24px 5%;border-bottom:1px solid #dcc9b4}header a{text-decoration:none;font-weight:800}header a span{display:block;font-size:10px;letter-spacing:2px}main{max-width:1160px;margin:auto;padding:26px 20px}.progress{display:flex;justify-content:space-between;gap:16px;margin:22px 0;font-weight:700}.painter-game{position:relative;display:grid;grid-template-columns:32% 68%;background:#fffaf2;border-radius:24px;overflow:hidden;border:1px solid #dbc5aa}.instructions{padding:24px;align-self:center}.instructions h2{font-size:23px;line-height:1.5}.instructions .actions{display:flex;flex-wrap:wrap;gap:10px}.studio{position:relative;min-height:560px;overflow:hidden}.studio-bg{width:100%;height:100%;position:absolute;object-fit:cover}#artist{position:absolute;width:36%;height:58%;object-fit:contain;left:0;bottom:4%;z-index:2}.canvas{position:absolute;left:39%;top:20%;width:53%;height:56%;background:#fffdf7;border:8px solid #c59663;border-radius:4px;padding:12px;box-shadow:0 3px 9px #69442133;display:grid;place-items:center}#board{width:100%;height:100%;display:grid;align-content:center;gap:0}#board button{min-width:0;min-height:44px;background:white;border:2px solid #3a3a3a;border-radius:0;padding:0;box-shadow:none;color:#333}#board button[data-colour=blue]{background:#5296ee}#board button[data-colour=yellow]{background:#ffd154}#board svg{width:100%;height:100%;overflow:visible}#board .sector{fill:#fff;stroke:#333;stroke-width:1.5;cursor:pointer}#board .sector[data-colour=blue]{fill:#5296ee}#board .sector:focus{outline:none;stroke:#723798;stroke-width:3}#board.apples{gap:7px}#board .apple{border:0!important;background:transparent!important;aspect-ratio:1;min-height:0;position:relative}#board .apple::after{content:'';position:absolute;inset:0;background:#fff;mask:url(painter-apple.webp) center/contain no-repeat;-webkit-mask:url(painter-apple.webp) center/contain no-repeat;filter:drop-shadow(0 1px 1px #333)}#board .apple[data-colour=blue]::after{background:#5296ee}#board .apple[data-colour=yellow]::after{background:#ffd154}#board .apple img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}.palette{display:flex;gap:10px;margin-bottom:20px}.palette button{border:3px solid transparent}.palette button[aria-pressed=true]{border-color:#26203a;box-shadow:0 0 0 2px white}#blue{background:#3e78c8}#yellow{background:#ffd154;color:#3a2d0e}#feedback{font-weight:800;min-height:48px;font-size:20px}#feedback.good{color:#187043}#feedback.bad{color:#af2737}.overlay{position:absolute;inset:0;z-index:5;background:#fff0dff2;display:grid;place-items:center;padding:22px;overflow:auto}.overlay[hidden]{display:none}.overlay-card{width:100%;max-width:740px;text-align:center}.overlay-card>img{max-height:320px;max-width:100%;object-fit:contain;border-radius:18px}#review{text-align:left;margin:20px 0;background:white;padding:18px;border-radius:16px;max-height:280px;overflow:auto}#review li{margin-bottom:16px}button:focus-visible{outline:3px solid #6c398a;outline-offset:3px}footer{margin-top:36px;font-size:12px}.studio.check-good #artist{animation:bounce .6s ease 2}.studio.check-bad #artist{animation:sad .7s ease 1}@keyframes bounce{50%{transform:translateY(-20px)}}@keyframes sad{50%{transform:rotate(-8deg) translateY(10px)}}@media(max-width:760px){.painter-game{grid-template-columns:1fr}.instructions{padding:16px}.instructions h2{font-size:19px}.studio{min-height:460px}.overlay-card>img{max-height:240px}.progress{font-size:13px}.canvas{padding:8px}}@media(prefers-reduced-motion:reduce){.studio.check-good #artist,.studio.check-bad #artist{animation:none}}
#board .apple img{mix-blend-mode:multiply}.palette[hidden]{display:none}#board .apple:focus-visible{outline:3px solid #6c398a;outline-offset:2px}
.studio-bg{width:150%;left:-50%;object-fit:fill}.canvas{left:44%;top:18%;width:42%;height:45%;border:0;box-shadow:none;background:#fffdf7;padding:8px}#board:not(.apples){max-width:280px;max-height:280px}.canvas:has(#board.apples){height:45%}
#level-failure{margin:12px auto;font-size:13px}#level-failure img{width:180px;border-radius:12px}#level-failure[hidden]{display:none}
/* Give every row a bounded share of the larger paper, including 24-apple questions. */
.canvas{left:38%;top:10%;width:57%;height:68%;padding:18px;background:#fffdf7;border:5px solid #c59663;box-sizing:border-box;box-shadow:0 4px 12px #62412030}.canvas:has(#board.apples){height:68%}#board{min-height:0;min-width:0;align-content:stretch;box-sizing:border-box}#board.apples{max-width:none;max-height:none;gap:7px}#board .apple{aspect-ratio:auto;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden}#board .apple::after,#board .apple img{inset:0;width:100%;height:100%;object-fit:contain}#board:not(.apples){align-self:center;aspect-ratio:1;width:100%;height:auto}#board:not(.apples) button{min-height:0!important;aspect-ratio:auto!important}#board:not(.apples) svg{aspect-ratio:1}@media(max-width:760px){.canvas{padding:10px}.studio{min-height:480px}}
/* Intro uses the same compact scale as the other game welcome screens. */
main{max-width:1000px;padding:10px 30px 35px}main>h1{font-size:clamp(34px,5vw,48px);margin:0 0 20px}.painter-game:has(.overlay:not([hidden]):not(.result-state))>.instructions,.painter-game:has(.overlay:not([hidden]):not(.result-state))>.studio{display:none}.painter-game:has(.overlay:not([hidden]):not(.result-state)){display:block}.overlay:not(.result-state){position:relative;inset:auto;min-height:560px;box-sizing:border-box;padding:28px;background:#fffaf2}.overlay:not(.result-state) .overlay-card{max-width:620px}.overlay:not(.result-state) .overlay-card>img{width:95px;height:145px;max-height:145px;margin:0 auto 15px}.overlay:not(.result-state) h2{font-size:clamp(28px,4vw,37px);line-height:1.2;margin:12px 0 20px}.overlay:not(.result-state) p{font-size:17px;line-height:1.6}.painter-game button:not(.apple){font-family:Fredoka,sans-serif;border-radius:24px;padding:12px 18px;border:1px solid #d2c4ae;background:#e4eedb;color:#514854;font-weight:600}.painter-game #blue{background:#3e78c8;color:white}.painter-game #yellow{background:#ffd154;color:#3a2d0e}#board .sector[data-colour=yellow]{fill:#ffd154}@media(max-width:760px){main{padding:10px 14px 30px}.overlay:not(.result-state){min-height:510px;padding:20px}.overlay:not(.result-state) .overlay-card>img{width:80px;height:120px}.overlay:not(.result-state) h2{font-size:28px}.overlay:not(.result-state) p{font-size:16px}}
#palette button[aria-pressed=true]{border:3px solid #26203a;box-shadow:0 0 0 2px white}