dialog.toy-shell,dialog.drawing-shell{background:#fff5dd;color:#234c3e;width:min(920px,96vw)}
.corner-intro{text-align:center;margin:0 auto 22px;max-width:600px}
.corner-intro>span{font-size:11px;font-weight:bold;letter-spacing:.13em;color:#8a653a}
.corner-intro h2{font-size:clamp(24px,4vw,33px);margin:8px 0;line-height:1.2}
.corner-intro p{font-size:16px;line-height:1.4;margin:0}
.corner-footnote{font-size:12px!important;line-height:1.5!important;text-align:center;margin:22px 0 0!important;color:#6c674a}
.toy-chest{max-width:640px;margin:0 auto;padding-top:46px;perspective:1000px}
.chest-lid{height:104px;position:relative;border:7px solid #8c542e;border-radius:55% 55% 8px 8px;background:repeating-linear-gradient(0deg,#bf884c 0 24px,#a16b39 25px,#bf884c 28px);box-shadow:inset 0 5px 0 #efc787;display:flex;justify-content:center;align-items:center;transform-origin:center bottom;transition:transform .65s cubic-bezier(.2,.6,.2,1);z-index:2}
.chest-lid::before,.chest-lid::after{content:'';position:absolute;top:0;bottom:0;width:18px;background:#e3bf77;border:2px solid #a77c43}.chest-lid::before{left:15%}.chest-lid::after{right:15%}
.chest-lid>span{position:relative;z-index:1;font-weight:bold;letter-spacing:.08em;font-size:16px;background:#f9d798;border:2px solid #9e723e;border-radius:8px;padding:8px 13px;color:#684122}
.chest-body{position:relative;min-height:180px;border:8px solid #89512b;border-radius:5px 5px 22px 22px;background:repeating-linear-gradient(0deg,#b77c43 0 47px,#976132 48px,#bd854c 52px);padding:26px 24px 38px;box-shadow:inset 0 12px 18px #633f2455,0 15px 25px #79542a30}
.chest-opener{display:flex;margin:26px auto;background:#ffe5a1;color:#573c26;box-shadow:0 5px 0 #77451f;font-size:19px;gap:15px;min-height:54px}
.chest-opener[hidden],.toy-items[hidden]{display:none}
.chest-lock{position:absolute;left:calc(50% - 13px);bottom:8px;width:26px;height:28px;border:3px solid #775630;background:#e6c47b;border-radius:6px}
.chest-lock::after{content:'';position:absolute;left:8px;top:6px;width:5px;height:10px;background:#795830;border-radius:5px}
.chest-open .chest-lid{transform:rotateX(-112deg)}
.toy-items{display:grid;grid-template-columns:1fr 1fr;gap:22px;animation:toysAppear .5s ease both}
.toy-choice{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff8e6;border:3px solid #f3d39b;border-radius:22px;padding:18px 13px;color:#24533f;box-shadow:0 6px 0 #68432f66;transition:transform .2s}
.toy-choice strong{font-size:21px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.toy-choice small{font-size:11px;line-height:1.4;letter-spacing:.03em}.toy-cta{font-size:13px;font-weight:bold;background:#e5eed6;border-radius:20px;padding:7px 15px;margin-top:auto}
.toy-basket{width:100%;max-width:205px;height:145px;position:relative;display:block;padding:0 9px 32px}
.toy-basket img{display:block;width:100%;height:100%;object-fit:cover;border-radius:13px;border:4px solid #ffe6a2;transform:rotate(-4deg)}
.toy-basket>span{position:absolute;bottom:4px;left:0;right:0;height:53px;border:4px solid #a3733d;border-radius:4px 4px 30px 30px;background:repeating-linear-gradient(90deg,transparent 0 14px,#80542c44 15px 18px),repeating-linear-gradient(0deg,#d5a463 0 10px,#b98748 11px 14px);box-shadow:0 4px 0 #75522c33}
.toy-cards{position:relative;display:block;width:155px;max-width:100%;height:145px}
.toy-card-back,.toy-card-front{position:absolute;width:100px;height:120px;border:5px solid #fff4cf;border-radius:16px;box-shadow:0 5px 7px #473c3533}
.toy-card-back{left:10px;top:10px;background:repeating-linear-gradient(45deg,#eac56a 0 8px,#fbe5a1 9px 17px);transform:rotate(-16deg)}
.toy-card-front{right:4px;top:12px;background:#d9ecdc;transform:rotate(12deg);display:grid;place-items:center}
.toy-card-picture{width:78px;height:78px;background:url('match-atlas.webp') 0 0/400% 200% no-repeat;border-radius:12px}
@keyframes toysAppear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.drawing-desk{position:relative;max-width:610px;margin:0 auto;padding:28px 35px 30px 20px;border:5px solid #bd8a52;border-radius:22px;background:repeating-linear-gradient(90deg,#e4bd85 0 65px,#d9ad74 66px,#eac58e 68px);box-shadow:0 8px 0 #b17a44,0 15px 24px #82592725}
.drawing-pad{position:relative;margin:0 18px 0 10px;background:#fffdfa;border-radius:5px 10px 10px 5px;padding:22px 18px 14px 30px;box-shadow:3px 4px 0 #dcd8c5,6px 8px 0 #fff8e9,9px 12px 0 #c9c9b1,0 18px 22px #71563635;touch-action:pan-y}
.pad-rings{position:absolute;z-index:1;left:-12px;top:20px;bottom:20px;width:25px;background:repeating-linear-gradient(0deg,transparent 0 19px,#61736c 20px 23px,#dce4d6 24px 26px,#596d62 27px 29px,transparent 30px 44px);filter:drop-shadow(1px 2px 1px #40554355)}
.pad-sheet{display:flex;flex-direction:column;align-items:center;gap:10px;background:transparent;border:0;color:#24543f;padding:0;width:100%}
.pad-sheet img{display:block;width:100%;height:clamp(200px,40dvh,380px);object-fit:contain;background:white}
.pad-sheet strong{font-size:22px;line-height:1.2}.pad-sheet>span{font-size:12px;font-weight:bold;color:#6b704b;padding:6px 8px;border-bottom:2px solid #d5b65c}
.pad-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px;border-top:1px solid #e5dfca;padding-top:12px}
.pad-navigation .button{font-size:13px;min-height:44px;padding:8px 13px;white-space:nowrap}.pad-navigation>span{font-size:12px;color:#6b6c51;white-space:nowrap}.pad-navigation button:disabled{opacity:.4;cursor:default}
.desk-pencils{position:absolute;right:8px;top:100px;bottom:35px;width:25px;display:flex;gap:3px;transform:rotate(5deg)}
.desk-pencils i{display:block;position:relative;width:6px;height:150px;background:#df6955;box-shadow:inset 2px 0 #ffffff55;border-radius:2px}.desk-pencils i:nth-child(2){background:#e4b941;transform:translateY(25px)}.desk-pencils i:nth-child(3){background:#6c9b76;transform:translateY(-18px)}
.desk-pencils i::after{content:'';position:absolute;bottom:-15px;left:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:15px solid #b68350}
.pad-turn .pad-sheet{animation:padTurn .3s ease both;transform-origin:left center}
@keyframes padTurn{from{opacity:.25;transform:rotateY(-20deg)}to{opacity:1;transform:none}}
.drawing-shell .drawing-selected{background:#fffdf8;border-radius:5px;box-shadow:5px 6px 0 #dfd8c1,9px 10px 0 #b5bca0;margin:20px auto;padding:10px;border-left:12px solid #9eac91}
.drawing-shell .drawing-selected .colorpage{border-radius:0;object-fit:contain}
.drawing-shell .coloractions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media(hover:hover){.toy-choice:hover{transform:translateY(-6px)}.pad-sheet:hover>span{color:#176959;border-color:#176959}}
@media(max-width:600px){.toy-shell .reader,.drawing-shell .reader{padding:18px 12px 24px}.corner-intro{margin-bottom:12px}.corner-intro h2{font-size:25px}.corner-intro p{font-size:14px}.toy-chest{padding-top:36px}.chest-lid{height:85px;border-width:5px}.chest-lid>span{font-size:12px}.chest-body{padding:18px 10px 35px;border-width:5px;min-height:150px}.toy-items{gap:10px}.toy-choice{padding:12px 6px;gap:9px;border-radius:16px}.toy-choice strong{font-size:17px;min-height:3.6em}.toy-choice small{font-size:10px}.toy-basket{height:112px;padding:0 3px 28px}.toy-basket>span{height:40px}.toy-cards{height:112px;width:113px}.toy-card-back,.toy-card-front{width:75px;height:91px;border-width:4px}.toy-card-picture{width:57px;height:57px}.toy-card-back{left:3px}.toy-card-front{right:1px}.toy-cta{font-size:11px;padding:7px 10px}.chest-opener{font-size:17px}.corner-footnote{font-size:10px!important}.drawing-desk{padding:23px 20px 24px 10px;border-width:3px}.drawing-pad{margin:0 8px;padding:17px 10px 12px 20px}.pad-sheet img{height:clamp(180px,35dvh,300px)}.pad-sheet strong{font-size:20px}.desk-pencils{right:2px;top:65px;width:17px;gap:2px}.desk-pencils i{width:4px;height:100px}.desk-pencils i::after{border-left-width:2px;border-right-width:2px}.pad-navigation .button{font-size:11px;padding:7px 10px}.pad-navigation{gap:5px}.pad-rings{width:23px}.drawing-shell .coloractions .button{font-size:14px}}
@media(prefers-reduced-motion:reduce){.chest-lid,.toy-choice{transition:none}.toy-items,.pad-turn .pad-sheet{animation:none}}
@media print{.drawing-shell .drawing-selected{box-shadow:none;margin:0;padding:0;border:0;background:white}}
