*{box-sizing:border-box}.learn-page{max-width:1280px;margin:20px auto;padding:0 16px}.learn-page>h1{font-size:26px;color:#344758;margin:0}.learn-page>p{color:#4b535a;margin:8px 0 16px}.quilt{container-type:inline-size;position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;border:6px solid #b5bc9d;border-radius:24px;background:#f5eddb url('./assets/linen.webp') center/cover;color:#233e50;font-family:'Zen Maru Gothic',sans-serif;overflow:hidden}.quilt button{font:700 clamp(12px,1.4cqw,20px)/1.3 'Zen Maru Gothic',sans-serif;color:#263c4b;border:2px dashed #b69d7a;outline:3px solid #fff8e1;border-radius:12px;background:#fff8e5;padding:9px 12px;cursor:pointer;box-shadow:0 3px 0 #87674725}.quilt button.primary{background:#9b4054;color:#fff9e8;border-color:#f3cfbb;outline-color:#9b4054}.quilt button[aria-pressed=true]{background:#b8c8a4;border-color:#57714f;outline-color:#b8c8a4}.quilt button:focus-visible{outline:4px solid #7252b0;outline-offset:2px}.quilt button:disabled{opacity:.5;cursor:default}.game-tools{position:absolute;right:2%;top:2%;height:7%;display:flex;gap:8px;z-index:5}.game-tools button{font-size:clamp(10px,1.1cqw,16px);padding:5px 8px;outline-width:2px}.game-tools button[aria-pressed=false]{background:#e7e3d8;color:#5b5c5b}#scene{position:absolute;inset:12% 3% 4%;display:grid;grid-template-columns:20% minmax(0,1fr) 23%;grid-template-rows:minmax(0,1fr) 20%;gap:3%}.stage-side{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:14px;align-items:stretch;padding:8px}.stage-side h2{font-size:clamp(19px,2.6cqw,38px);line-height:1.25;margin:0 0 8px}.stage-side p{font-size:clamp(12px,1.5cqw,21px);margin:0}.stages{display:grid;gap:12px;max-width:120px;width:80%;align-self:center}.stages button{font-size:clamp(20px,2.8cqw,40px);padding:6px;position:relative}.stages small{font-size:12px;position:absolute;right:7px;top:6px}.center{grid-column:2;grid-row:1;display:grid;grid-template-rows:12% minmax(0,1fr);gap:3%;min-height:0;justify-items:center}.ribbon{align-self:stretch;width:100%;display:flex;align-items:center;justify-content:space-around;gap:4px;padding:4px 8px;border:2px dashed #e7d2ab;outline:3px solid #698278;border-radius:10px;background:#698278;color:#fffdf0;font-size:clamp(12px,1.5cqw,22px);font-weight:700}.board{height:100%;aspect-ratio:1;max-width:100%;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border:6px solid #83987a;border-radius:10px;overflow:hidden;background:#83987a}.quilt .cell{position:relative;min-width:0;min-height:0;padding:0;border:0;outline:none;border-radius:0;box-shadow:none;background:#eee5ce url('./assets/tile.webp') center/100% 100%;display:grid;place-items:center;touch-action:manipulation}.cell img{width:90%;height:90%;object-fit:contain;pointer-events:none}.cell.given:after{content:'●';position:absolute;top:3%;right:5%;font-size:clamp(8px,1cqw,14px);color:#456244}.cell.active:before{content:'';position:absolute;inset:4%;border:4px solid #8e4d91;z-index:2;border-radius:7px;pointer-events:none}.quilt .cell:focus-visible{outline-offset:-5px;z-index:3}.quilt .cell:disabled{opacity:1}.utility{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:8px}.utility button{min-height:45px}.utility .message{font-size:clamp(12px,1.45cqw,20px);line-height:1.5;min-height:4.5em;margin:0;background:#fff9e5dc;padding:10px;border-radius:12px}.palette{grid-column:2;grid-row:2;display:flex;align-items:stretch;justify-content:center;gap:9px;padding:8px 10px;background:#a85464;border:3px dashed #e9c7ae;outline:4px solid #a85464;border-radius:15px;min-height:0}.palette button{flex:1;min-width:0;min-height:0;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(10px,1.05cqw,15px);outline:0}.palette img{width:80%;height:70%;min-height:0;object-fit:contain}.palette .eraser{font-size:clamp(25px,3cqw,45px)}.quilt[data-scene=result] .palette{font-size:clamp(15px,2cqw,29px);font-weight:700;align-items:center;text-align:center;background:#fff5d9;color:#364d46;border-color:#a85464;line-height:1.5}.quilt[data-scene=menu] #scene{grid-template-columns:17% minmax(0,1fr) 30%;grid-template-rows:minmax(0,1fr) 18%}.intro{grid-column:2;grid-row:1;background:#fff7e7ed;border:3px dashed #baa27b;outline:6px solid #fff7e7;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7%;padding:6%;text-align:center}.intro h2{font-size:clamp(25px,4cqw,58px);line-height:1.25;margin:0;color:#2c4c68}.intro p{font-size:clamp(14px,1.9cqw,27px);margin:0}.intro button{font-size:clamp(18px,2.7cqw,38px);width:90%;padding:12px}.preview{grid-column:3;grid-row:1;display:grid;place-items:center}.preview .board{width:100%;height:auto}.preview .cell img{height:90%;width:90%}.menu-animals{grid-column:2/4;grid-row:2;display:flex;justify-content:center;min-height:0;gap:8%;background:#b8c8c9a0;border-radius:16px;padding:4px}.menu-animals img{height:100%;width:auto;max-width:21%;object-fit:contain}.sheet{position:absolute;inset:0;z-index:10;background:#3b4c60bb;display:grid;place-items:center;padding:3%;backdrop-filter:blur(4px)}.sheet[hidden]{display:none}.sheet>div{background:#fff7e7;border:3px dashed #bba383;outline:5px solid #fff7e7;border-radius:20px;padding:22px;width:min(92%,560px);max-height:100%;overflow:auto;display:grid;gap:12px}.sheet h2,.sheet p{margin:0}.sheet p{font-size:clamp(12px,1.35cqw,19px);line-height:1.6}.parent-note{font-size:13px!important}.quilt:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}@media(max-width:900px) and (orientation:landscape){#scene{grid-template-columns:17% minmax(0,1fr) 26%}.stage-side{gap:7px}.stages{gap:8px}.stages button{font-size:23px;padding:3px}.utility{gap:9px}.utility button{font-size:12px;min-height:32px;padding:7px 3px}.utility .message{font-size:12px;padding:6px}.stage-side h2{font-size:21px}.ribbon{font-size:12px}}@media(max-width:600px) and (orientation:portrait){.learn-page{padding:0 8px}.quilt{aspect-ratio:auto;border-width:4px}.game-tools{position:relative;top:auto;right:auto;justify-content:flex-end;height:37px;margin:8px;gap:5px}.game-tools button{font-size:10px;padding:4px 5px}#scene,.quilt[data-scene=menu] #scene{position:relative;inset:auto;margin:14px;display:flex;flex-direction:column;gap:17px}.stage-side{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px}.stage-side h2{font-size:23px;margin:0}.stage-side p{font-size:13px}.stages{display:flex;gap:9px;width:100%;max-width:none;grid-column:2;grid-row:1/3}.stages button{flex:1;font-size:22px;padding:6px;min-height:40px}.stages small{font-size:9px;right:2px}.center{width:100%;display:flex;flex-direction:column;gap:13px}.ribbon{font-size:15px;min-height:38px;padding:7px}.board{width:100%;height:auto;max-width:420px;border-width:5px;align-self:center}.palette{width:100%;height:85px;padding:7px;gap:6px;order:3}.palette button{font-size:11px}.palette img{width:90%;height:68%}.palette .eraser{font-size:27px}.utility{order:4;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:2px}.utility .message{grid-column:1/-1;min-height:0;font-size:14px;margin:0;padding:10px}.utility button{font-size:14px;min-height:43px}.intro{min-height:240px;padding:22px;gap:20px}.intro h2{font-size:34px}.intro p{font-size:17px}.intro button{font-size:22px}.preview{width:60%;align-self:center}.menu-animals{height:85px;padding:5px;gap:6%}.sheet>div{padding:18px}.sheet p{font-size:14px}.sheet button{font-size:16px}.quilt[data-scene=result] .palette{font-size:20px}.quilt:fullscreen{overflow:auto;min-height:100dvh}.quilt:fullscreen .game-tools{position:sticky;top:0;background:#f5eddb;z-index:6}}
@media(min-width:601px),(orientation:landscape){.center{grid-template-rows:minmax(0,1fr);gap:0}.center .ribbon{position:absolute;top:-11%;left:23%;width:48%;height:8%}.stage-side h2{background:#fff8e8e8;border-radius:12px;padding:10px}.quilt[data-scene=menu] .stage-side h2{display:none}}
.cell img{width:100%;height:100%}.palette button:disabled{opacity:1;color:#6b6460}.palette button:disabled img{opacity:.85}

@media(max-width:900px) and (orientation:landscape){.center .ribbon{left:20%;width:37%;font-size:11px}.ribbon b{font-size:12px}}