.picnic-page{max-width:1280px;margin:22px auto 40px;padding:0 16px;color:#482b17;font-family:'Zen Maru Gothic','Yu Gothic',sans-serif}.picnic-heading{margin:0 0 16px}.picnic-heading h1{font-size:clamp(24px,3vw,36px);margin:0 0 5px}.picnic-heading p{margin:0;font-size:15px}.picnic{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:16/9;background:#fff7e1 url('./assets/clearing.webp') center/cover;border:2px solid #e5d5b3;border-radius:24px;overflow:hidden;box-shadow:0 12px 32px #57411b14;font-weight:700}.picnic *{box-sizing:border-box}.picnic [hidden]{display:none!important}.picnic button{font:inherit;color:#482b17;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:2px solid #b29d75;border-radius:15px;background:#fffbee;min-height:44px;padding:8px 14px;line-height:1.35}.picnic button:hover{background:#fff1c9;border-color:#7a632c}.picnic button:focus-visible{outline:4px solid #287476;outline-offset:3px}.picnic button:disabled{opacity:.55;cursor:default}.picnic .primary{background:#e96615;border-color:#b9470a;color:#fff;box-shadow:0 4px 0 #b44c0e;font-size:clamp(16px,1.9cqw,25px);padding:11px 20px}.picnic .primary:hover{background:#cc520c}.picnic .secondary{background:#fff9e8;border-color:#6a8750;color:#355229;font-size:clamp(13px,1.4cqw,18px)}.picnic-tools{position:absolute;right:2.2%;top:2.5%;z-index:8;display:flex;gap:7px}.picnic-tools button{min-width:42px;min-height:40px;padding:7px 9px;background:#fffbedeb;border-radius:50px;font-size:17px}.picnic-tools button span{font-size:11px}.picnic-tools [aria-pressed=false]:not(#fullscreen){color:#74614c;background:#e9e2d6;text-decoration:line-through}.scene{position:absolute;inset:0}.menu-scene{display:grid;grid-template-columns:58% 42%;padding:6% 5% 4%;align-items:center}.welcome{z-index:1}.eyebrow{font-size:clamp(12px,1.6cqw,20px);letter-spacing:.08em;margin:0 0 10px;color:#52703d}.welcome h2{font-size:clamp(36px,6cqw,78px);line-height:1.25;white-space:nowrap;margin:0 0 12px;letter-spacing:-.06em}.welcome h2 em{font-style:normal;color:#d65c13;font-size:1.34em}.invitation{font-size:clamp(16px,2.1cqw,27px);margin:14px 0}.pair-choice{border:0;padding:0;margin:20px 0}.pair-choice legend{font-size:14px;margin-bottom:9px}.pair-choice>div{display:flex;gap:10px}.pair-choice button{flex:1;font-size:clamp(17px,2.5cqw,31px);padding:10px 4px}.pair-choice button small{display:block;font-size:11px;margin-top:3px;font-weight:500}.pair-choice [aria-pressed=true]{background:#568044;color:white;border-color:#355a29;box-shadow:inset 0 0 0 3px #fff9}.welcome>.primary{display:block;width:90%;margin:20px 0 14px}.welcome>.secondary{width:90%}.gentle{font-size:clamp(12px,1.3cqw,17px);color:#625538;margin:18px 0 0}.welcome-art{display:flex;align-items:center;flex-direction:column;align-self:stretch;justify-content:center;padding-left:6%}.welcome-art>.squirrel{height:68%;max-width:100%;object-fit:contain;min-height:0}.example{background:#fffbee;border:2px solid #b7ab83;border-radius:18px;padding:10px 17px;width:100%;max-width:320px;text-align:center;box-shadow:0 5px 0 #c2a46d33}.example>b{display:block;font-size:clamp(20px,2.8cqw,36px);margin-bottom:7px}.example>b span:first-child{color:#b34024}.example>b span:last-child{color:#416b26}.ten-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;max-width:320px;margin:0 auto}.ten-cell{aspect-ratio:1;min-width:0;border:1.5px solid #a89b78;border-radius:5px;background:#fffdf3;display:grid;place-items:center}.ten-cell.first{border:2px solid #b34b28;background:#fff0de}.ten-cell.second{border:2px dashed #4b752e;background:#eef4dc}.ten-cell img{width:83%;height:83%;object-fit:contain}.play-heading{position:absolute;top:3%;left:4%;right:4%;height:9%;display:flex;align-items:center;gap:5%}.play-heading h2{font-size:clamp(19px,2.6cqw,33px);margin:0;white-space:nowrap}.progress{font-size:15px;display:flex;align-items:center;gap:12px}.progress b{font-size:22px}#stamps{display:flex;gap:4px}#stamps i{width:19px;height:19px;border:1px solid #a99873;border-radius:50%;display:block;background:#fff9}#stamps i.done{background:#e4edb5 url('./assets/leaf.webp') center/85% no-repeat;border-color:#5d7536}.play-layout{position:absolute;top:16%;bottom:6%;left:4%;right:4%;display:grid;grid-template-columns:65% 32%;gap:3%;min-height:0}.card-space{display:flex;flex-direction:column;min-height:0;gap:12px}.cards{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(var(--rows,2),minmax(0,1fr));gap:9px;flex:1;min-height:0}.picnic .number-card{position:relative;border:0;border-radius:18px;background:transparent url('./assets/card.webp') center/100% 100% no-repeat;min-width:0;min-height:0;padding:8% 10%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .16s,opacity .16s;box-shadow:0 4px 3px #66532c18}.number-card strong{font:900 clamp(23px,4.3cqw,56px)/1.1 'Zen Maru Gothic','Yu Gothic',sans-serif;color:#482b17}.card-apples{width:85%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:1px;margin-top:6px}.card-apples span{aspect-ratio:1;min-height:0}.card-apples img{width:100%;height:100%;object-fit:contain}.picnic .number-card[aria-pressed=true]{box-shadow:0 0 0 4px #287476,0 5px 0 #28747640;background-color:#f8edb655}.picnic .number-card.hinted{outline:4px dashed #cf6b13;outline-offset:2px}.picnic .number-card.done{opacity:.3;box-shadow:none;cursor:default}.number-card.done::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:46px;color:#355a29;background:#fff9;border-radius:18px}.board-actions{display:flex;gap:10px}.board-actions>button{flex:1}.count-space{display:flex;flex-direction:column;min-height:0;align-items:center;justify-content:center}.count-space>.squirrel{height:32%;width:80%;object-fit:contain;min-height:0}.count-paper{background:#fff9e9f5;border:2px solid #cab990;border-radius:18px;text-align:center;padding:12px;width:100%;min-height:0}#feedback{font-size:clamp(12px,1.45cqw,19px);line-height:1.5;margin:0 0 8px;min-height:2.5em}.formula{font:900 clamp(22px,3.6cqw,45px)/1.1 'Zen Maru Gothic','Yu Gothic',sans-serif;margin:7px 0 12px;white-space:nowrap}.formula .first{color:#b34024}.formula .second{color:#416b26}.count-paper .ten-frame{max-width:230px}.count-help{font-size:clamp(11px,1.2cqw,15px);line-height:1.4;min-height:2.8em;margin:9px 0 0}.count-paper>.primary{font-size:clamp(14px,1.6cqw,20px);width:100%;margin-top:8px;min-height:40px;padding:8px}.overflow-apples{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;margin-top:5px}.overflow-apples img{width:20px;height:20px;object-fit:contain;border:1px dashed #4b752e;border-radius:3px}.result-scene{padding:8% 5% 5%;display:grid;grid-template-columns:65% 35%;align-items:center}.result-paper{z-index:1}.result-paper h2{font-size:clamp(25px,4cqw,52px);margin:0 0 12px;white-space:nowrap;color:#b84915}.result-paper>p{font-size:clamp(12px,1.6cqw,20px)}.equations{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.equations>span{background:#fffbed;border:2px solid #75934d;border-radius:14px;padding:10px;text-align:center;font-size:clamp(18px,2.8cqw,36px);white-space:nowrap}.equations b:first-child{color:#b34024}.equations b:nth-child(2){color:#416b26}.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.result-actions>button{font-size:clamp(13px,1.5cqw,19px);flex:1}.result-squirrel{width:115%;max-width:none;align-self:center;transform:translateX(-3%)}.overlay{position:absolute;inset:0;z-index:20;background:#4a49295e;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.rules-overlay{z-index:22}.dialog{background:#fff9e9;border:3px solid #749456;border-radius:24px;box-shadow:0 12px 40px #352a2340;padding:25px;width:min(510px,95%);max-height:100%;overflow:auto;text-align:center}.dialog h2{font-size:30px;margin:0 0 14px}.dialog p{font-size:15px;line-height:1.8}.dialog>button{display:block;width:100%;margin-top:12px}.rules-dialog{width:min(620px,96%)}.rules-dialog ol{text-align:left;padding-left:25px;margin:14px 0}.rules-dialog li{font-size:17px;line-height:1.8;margin-bottom:12px}.rules-dialog .keyboard-note{font-size:12px;color:#6b5a40}.parent-note{margin:24px 0;background:#fffdf5;padding:22px;border:1px solid #e4d7bc;border-radius:18px;font-size:14px;line-height:1.9}.parent-note h2{font-size:20px;margin:0}.parent-note summary{cursor:pointer;color:#355a29;font-weight:700}.picnic:fullscreen,.picnic.faux-fullscreen{width:100vw!important;height:100dvh!important;max-width:none!important;aspect-ratio:auto!important;border-radius:0!important;border:0!important}.picnic.faux-fullscreen{position:fixed!important;inset:0!important;z-index:2147483600!important}.picnic[data-scene=result] .picnic-tools #pause{display:none}#loadMessage{position:absolute;bottom:1%;left:5%;right:5%;z-index:30;background:#fff8df;color:#482b17;text-align:center}.picnic .number-card:disabled{opacity:.3}.cards[data-pairs="8"] .number-card strong{font-size:clamp(21px,3.1cqw,40px)}.cards[data-pairs="8"] .card-apples{width:65%;margin-top:2px}.cards[data-pairs="6"] .number-card strong{font-size:clamp(24px,3.5cqw,44px)}
@media(max-width:900px) and (min-aspect-ratio:1/1){.picnic{min-height:400px}.picnic-tools{gap:4px;right:2%;top:2%}.picnic-tools button{min-height:34px;min-width:34px;padding:5px;font-size:16px}.picnic-tools button span{display:none}.menu-scene{padding:6% 5% 3%}.pair-choice{margin:12px 0}.pair-choice legend{font-size:12px}.pair-choice button small{font-size:9px}.pair-choice button{padding:6px}.welcome>.primary{margin:12px 0 10px;padding:8px}.gentle{margin-top:10px}.welcome h2{margin-bottom:6px}.invitation{margin:8px 0}.play-heading{gap:3%}.progress{font-size:12px;gap:6px}.progress b{font-size:16px}#stamps{gap:3px}#stamps i{width:12px;height:12px}.play-layout{top:16%;bottom:4%;grid-template-columns:66% 31%}.cards{gap:6px}.card-space{gap:7px}.board-actions>button{min-height:36px;padding:6px}.count-space>.squirrel{height:23%}.count-paper{padding:8px}.count-paper .ten-frame{max-width:135px;gap:2px}#feedback{font-size:12px;margin-bottom:4px;min-height:2.6em}.formula{font-size:28px;margin:4px 0 7px}.count-help{font-size:10px;margin:5px 0 0;min-height:2.4em}.count-paper>.primary{padding:6px;min-height:34px;margin-top:4px;font-size:13px}.card-apples{width:62%;margin-top:2px}.cards[data-pairs="8"] .card-apples{width:48%}.overflow-apples img{width:14px;height:14px}.result-scene{padding-top:7%}.equations{gap:6px;margin:12px 0}.equations>span{padding:5px}.result-actions{margin-top:12px;gap:7px}.result-actions>button{padding:8px}.dialog{padding:18px}.dialog h2{font-size:25px}.dialog p{font-size:13px}.dialog>button{margin-top:9px}.rules-dialog li{font-size:15px;margin-bottom:7px}}
@media(max-aspect-ratio:1/1){.picnic{aspect-ratio:auto;height:min(780px,calc(100svh - 24px));min-height:620px;background-position:center;border-radius:18px}.picnic-page{padding:0 10px}.picnic-tools{top:12px;right:12px;gap:5px}.picnic-tools button{min-width:37px;min-height:37px;padding:5px;font-size:18px}.picnic-tools button span{display:none}.menu-scene{padding:65px 20px 24px;display:block}.welcome{position:relative;z-index:2}.eyebrow{font-size:14px}.welcome h2{font-size:clamp(31px,9cqw,46px);margin:0 0 13px}.invitation{font-size:18px;margin:9px 0}.pair-choice{margin:18px 0 0}.pair-choice legend{font-size:12px}.pair-choice button{font-size:23px;min-height:62px}.pair-choice button small{font-size:9px}.welcome>.primary{width:100%;margin:18px 0 12px;font-size:20px}.welcome>.secondary{width:100%;font-size:15px}.welcome>.gentle{text-align:center;font-size:12px;margin-top:12px}.welcome-art{position:absolute;bottom:17px;left:20px;right:20px;height:26%;padding:0;flex-direction:row;gap:8px}.welcome-art>.squirrel{height:100%;width:42%}.example{width:58%;padding:8px}.example>b{font-size:22px}.example .ten-frame{max-width:145px;gap:3px}.play-heading{top:61px;height:46px;left:16px;right:16px;justify-content:space-between;gap:8px}.play-heading h2{font-size:20px}.progress{display:block;font-size:12px;text-align:right}.progress b{font-size:17px}#stamps{justify-content:flex-end;margin-top:3px}#stamps i{width:12px;height:12px}.play-layout{top:118px;bottom:20px;left:16px;right:16px;display:flex;flex-direction:column;gap:12px}.card-space{flex:1;gap:9px;min-height:0}.cards{gap:7px}.picnic .number-card{border-radius:10px;padding:6px}.number-card strong{font-size:34px}.card-apples{width:85%;gap:0;margin-top:2px}.cards[data-pairs="8"] .number-card strong{font-size:24px}.cards[data-pairs="6"] .number-card strong{font-size:28px}.cards[data-pairs="8"] .card-apples{width:72%}.board-actions{gap:10px}.board-actions>button{font-size:13px;min-height:40px;padding:6px}.count-space{flex:0 0 168px;position:relative}.count-space>.squirrel{position:absolute;height:103px;width:83px;left:-5px;bottom:0;z-index:1}.count-paper{height:100%;padding:10px 9px 10px 74px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:9px;align-items:center}.count-paper #feedback{grid-column:1/3;font-size:12px;margin:0;min-height:0;line-height:1.3}.formula{font-size:23px;margin:5px 0}.count-paper .ten-frame{width:110px;max-width:100%;gap:2px}.count-help{grid-column:1/3;font-size:11px;margin:4px 0 0;min-height:0}.count-paper>.primary{grid-column:1/3;font-size:14px;min-height:34px;padding:5px;margin-top:5px}.count-paper:has(#next:not([hidden])) .count-help{display:none}.overflow-apples{grid-column:1/3;margin:0}.overflow-apples img{width:12px;height:12px}.count-paper:has(#overflow:not([hidden])) .count-help{display:none}.result-scene{padding:74px 20px 24px;display:block}.result-paper h2{font-size:28px;white-space:normal}.result-paper>p{font-size:14px}.equations{gap:8px;margin:18px 0}.equations>span{font-size:23px;padding:9px 3px}.result-actions{margin-top:17px;gap:10px;display:grid;grid-template-columns:1fr}.result-actions>button{font-size:16px;padding:9px}.result-squirrel{position:absolute;bottom:0;right:12px;width:30%;max-height:150px;object-fit:contain;transform:none;z-index:-1;opacity:.7}.result-paper>.gentle{font-size:12px}.overlay{padding:12px}.dialog{width:100%;padding:20px 17px;border-radius:20px}.dialog h2{font-size:26px}.dialog p{font-size:13px}.dialog>button{font-size:15px;min-height:44px}.rules-dialog li{font-size:15px;line-height:1.75}.rules-dialog .keyboard-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.picnic *{transition:none!important;animation:none!important}}
.menu-scene{grid-template-rows:minmax(0,1fr)}.welcome-art{min-height:0}.welcome-art>.squirrel{flex:1;min-height:0;height:0;max-height:68%}.example{flex-shrink:0}.picnic .number-card:hover{background-image:url('./assets/card.webp');background-color:#fff0c9;background-size:100% 100%;background-position:center;background-repeat:no-repeat}.picnic:fullscreen,.picnic.faux-fullscreen{min-height:0!important}
@media(max-aspect-ratio:1/1){.welcome-art>.squirrel{flex:0 0 42%;height:100%;max-height:100%}}
.picnic-tools button span{display:block;font-size:9px;line-height:1.1}.picnic-tools #music,.picnic-tools #sound{min-width:55px}
@media(max-width:900px) and (min-aspect-ratio:1/1){.menu-scene{padding:40px 5% 12px}.welcome h2{font-size:4.5cqw}.welcome>.gentle{display:none}.eyebrow{font-size:11px;margin-bottom:4px}.invitation{font-size:15px;margin:6px 0}.pair-choice{margin:9px 0}.pair-choice legend{font-size:11px;margin-bottom:5px}.pair-choice button{min-height:48px;padding:4px}.welcome>.primary{margin:10px 0 9px;min-height:40px}.welcome>.secondary{min-height:38px;padding:6px}}
@media(max-aspect-ratio:1/1){.welcome-art{height:clamp(120px,calc(100% - 500px),300px);bottom:20px}}
.number-card strong,.formula,.example>b,.equations>span,.welcome h2 em{font-family:Arial,'Noto Sans JP','Yu Gothic',sans-serif}.cards[data-pairs="8"] .number-card{padding:3px 8px}
.result-scene{grid-template-rows:minmax(0,1fr)}.result-paper{min-height:0}.result-paper h2{line-height:1.25}.result-squirrel{height:100%;max-height:100%;width:100%;object-fit:contain}.equations>span{line-height:1.2}
@media(min-aspect-ratio:1/1){.picnic[data-pairs="8"] .equations{grid-template-columns:repeat(4,minmax(0,1fr))}.picnic[data-pairs="8"] .equations>span{font-size:clamp(16px,2cqw,26px);padding:10px 3px}}
@media(max-aspect-ratio:1/1){.result-squirrel{height:auto;max-height:150px;width:30%}}
.result-paper h2:focus{outline:none}
@media(max-aspect-ratio:1/1){.cards{grid-template-rows:repeat(4,minmax(0,1fr))}.cards[data-pairs="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.cards[data-pairs="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-aspect-ratio:1/1) and (max-height:700px){.picnic .number-card{padding:3px}.cards .number-card strong{font-size:26px}.cards .card-apples{width:60px;max-width:84%;margin-top:1px}}