.shop-page{max-width:1280px;margin:auto;padding:12px 18px 28px}.shop-page>h1{font-size:clamp(22px,3vw,34px);margin:0;color:#194b36}.shop-page>p{margin:4px 0 12px}.shop{--u:min(1cqw,1.77778cqh);container-type:size;position:relative;width:100%;aspect-ratio:16/9;border:4px solid #74502c;border-radius:16px;overflow:hidden;isolation:isolate;background:#e9d7ad url('./assets/shop.webp') center/cover;color:#244330;font:900 16px 'Zen Maru Gothic',sans-serif}.shop *{box-sizing:border-box}.shop [hidden]{display:none!important}.shop button{font:inherit;line-height:1.45;cursor:pointer;color:#244330;background:#fff8e5;border:2px solid #a4824c;border-radius:9px;padding:.45em .75em;box-shadow:0 3px 0 #63381830}.shop button:focus-visible{outline:4px solid #da5b21;outline-offset:2px}.shop button:hover{filter:brightness(1.06)}.shop button:disabled{cursor:default;opacity:.5}.shop .primary{background:#18533a;color:#fff6dd;border-color:#ccaa6a}.base{height:100%;display:flex;flex-direction:column}.game-tools{height:11%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 1.5%;background:#154b38ed;color:#fff8df;border-bottom:3px solid #b8a477}.game-tools strong{font-size:calc(var(--u)*2.5);white-space:nowrap}.game-tools nav{display:flex;gap:calc(var(--u)*.5)}.game-tools button{font-size:calc(var(--u)*1.15)}.cover{flex:1;min-height:0;display:grid;grid-template-columns:59% 38%;gap:3%;padding:3%}.sample-shop{min-height:0;display:flex;flex-direction:column;justify-content:center}.sample-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));height:90%;gap:6%;background:url('./assets/tray.webp') center/100% 100%;padding:10% 10% 20%;min-height:0}.sample-items>div{min-height:0;display:flex;align-items:center;justify-content:center;gap:8px}.sample-items img{height:100%;width:75%;min-height:0;object-fit:contain}.sample-items b{font-size:calc(var(--u)*2.1);background:#fff5de;border:2px solid #b59a69;padding:.6em .2em;border-radius:6px;writing-mode:vertical-rl}.sample-shop>p{text-align:center;font-size:calc(var(--u)*1.5);margin:6px 0 0;background:#fff7e8da;padding:.4em;border-radius:6px}.invitation{background:#fff6dfed;border:3px solid #c7a76e;box-shadow:0 6px 0 #61361430;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.6);padding:6%;position:relative}.tag-hole{width:calc(var(--u)*2);height:calc(var(--u)*2);border:4px solid #ab792e;background:#543718;border-radius:50%}.invitation h2{font-size:calc(var(--u)*4.4);line-height:1.4;flex-shrink:0;margin:0;color:#8f2c1f;text-align:center}.invitation p{font-size:calc(var(--u)*1.7);line-height:1.6;text-align:center;margin:0}.invitation .primary{font-size:calc(var(--u)*1.9);width:100%}.invitation small{font-size:calc(var(--u)*1.1);text-align:center;line-height:1.6}.game{flex:1;min-height:0;display:grid;grid-template-columns:64% 34%;grid-template-rows:minmax(0,1fr) 12%;gap:2%;padding:2% 3%}.question-area{min-height:0;display:flex;flex-direction:column;gap:2%}.tray{flex:1;min-height:0;position:relative;background:url('./assets/tray.webp') center/100% 100%;}.items{position:absolute;inset:17% 8% 25%;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));align-items:center;gap:3%;}.piece{width:100%;height:100%;min-height:0;object-fit:contain}.question-card{height:30%;min-height:0;background:#fff8e9f5;border:2px solid #bf9d63;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;padding:1% 2%;text-align:center}.question-card h2{font-size:calc(var(--u)*2.2);line-height:1.5;margin:0}.question-card #feedback{font-size:calc(var(--u)*1.9);line-height:1.5;white-space:nowrap}.question-card #feedback[data-kind=correct]{color:#19643c}.question-card #feedback[data-kind=wrong]{color:#9a3929}.question-card small{font-size:calc(var(--u)*1.1);min-height:1.5em;line-height:1.5}.answers{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:4%;min-height:0}.shop .answer{position:relative;background:transparent url('./assets/tag.webp') center/100% 100%;border:0;border-radius:14px;padding:5% 11%;font-size:calc(var(--u)*3);box-shadow:none;white-space:nowrap;color:#233c2e}.shop .answer:disabled{opacity:1}.shop .answer.correct{outline:4px solid #25844b;outline-offset:-5px}.shop .answer.selected-wrong{outline:4px dashed #aa482d;outline-offset:-5px}.answer.correct:after{content:'○';font-size:.7em;position:absolute;right:7%;top:50%;transform:translateY(-50%);color:#16733f}.ledger{grid-column:1/-1;display:flex;align-items:center;gap:3%;min-height:0}.ledger>span{flex:1;height:100%;display:flex;align-items:center;justify-content:center;gap:9%;background:url('./assets/brass.webp') center/100% 100%;color:#3c2f18;padding:0 5%}.ledger small{font-size:calc(var(--u)*1.3);white-space:nowrap}.ledger b{font:700 calc(var(--u)*2.7)/1.5 Fredoka,sans-serif}.ledger button{font-size:calc(var(--u)*1.4);color:#fff4db;background:#963e2c;border-color:#ddb37a;white-space:nowrap}.dialog{position:absolute;inset:0;z-index:5;background:#1e3024b8;display:grid;place-items:center;padding:3%}.dialog-card{position:relative;background:#fff7e7;border:4px solid #8e7143;box-shadow:0 8px 0 #0003;border-radius:22px;width:min(78%,740px);max-height:100%;overflow:auto;padding:5% 4% 3%;font-size:calc(var(--u)*1.6)}.dialog-card h2{margin:0 0 4%;text-align:center;font-size:calc(var(--u)*2.8)}.dialog-card p{line-height:1.8;margin:.5em 0}.dialog-card .close{position:absolute;right:2%;top:2%;font-size:calc(var(--u)*1.2)}.dialog-card section{display:flex;flex-direction:column;gap:10px}.dialog-card dl{margin:.4em 0;display:grid;gap:4px}.dialog-card dl>div{display:grid;grid-template-columns:22% 78%;padding:.4em;border-bottom:1px solid #d9cbae}.dialog-card dd{margin:0}.dialog-card small{font-size:.8em}.dialog-card input{width:100%;accent-color:#235c3b}.dialog-card label{display:flex;justify-content:space-between}.parent-note{font-size:14px;line-height:1.7;padding:12px}.shop:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}
@media(orientation:portrait) and (max-width:680px){.shop-page{padding:8px}.shop{height:min(780px,calc(100dvh - 12px));aspect-ratio:auto;--u:1cqw;border-width:2px}.game-tools{height:80px;padding:4px 2%;flex-direction:column;justify-content:center;gap:4px}.game-tools strong{font-size:22px}.game-tools nav{width:100%;justify-content:space-between;gap:2px}.game-tools button{font-size:11px;padding:.4em .3em}.cover{grid-template-columns:1fr;grid-template-rows:44% 54%;gap:2%;padding:3%}.sample-shop{height:100%}.sample-items{padding:7% 10% 19%;height:88%;gap:5%}.sample-items b{font-size:18px;padding:.35em .15em}.sample-shop>p{font-size:12px}.invitation{padding:4%;gap:8px;border-radius:18px}.tag-hole{width:15px;height:15px;border-width:3px}.invitation h2{font-size:30px;line-height:1.4}.invitation h2 br{display:none}.invitation p{font-size:16px}.invitation .primary{font-size:20px}.invitation small{font-size:12px}.game{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 24% 8%;gap:2%;padding:3%}.question-area{gap:2%}.question-card{height:30%;min-height:86px;padding:2%}.question-card h2{font-size:20px;line-height:1.4}.question-card #feedback{font-size:17px}.question-card small{font-size:11px}.items[data-many=true]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5% 8%}.items[data-many=true] .piece{height:100%}.answers{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6% 3%}.shop .answer{font-size:21px;padding:7% 10%}.answer.correct:after{font-size:.55em;right:4%}.ledger{gap:2%}.ledger>span{padding:0 4%;gap:3%;flex-direction:column}.ledger small{font-size:10px}.ledger b{font-size:20px;line-height:1.1}.ledger button{font-size:11px;max-width:25%;white-space:normal;padding:.35em}.dialog-card{width:98%;padding:48px 5% 6%;font-size:15px;max-height:98%}.dialog-card h2{font-size:25px}.dialog-card .close{font-size:13px}.dialog-card dl>div{grid-template-columns:1fr;gap:2px}.dialog-card dd{font-size:14px}.shop:fullscreen{height:100dvh}}
@media(orientation:landscape) and (max-height:520px){.game-tools{height:42px}.game-tools strong{font-size:20px}.game-tools button{font-size:11px;padding:.3em .45em}.cover{padding:2%;grid-template-columns:59% 39%;gap:2%}.invitation{gap:5px;padding:3%}.tag-hole{width:12px;height:12px;border-width:2px}.invitation h2{font-size:30px}.invitation p{font-size:13px;line-height:1.4}.invitation .primary{font-size:16px}.invitation small{font-size:10px}.sample-items b{font-size:18px}.sample-shop>p{font-size:12px}.game{padding:1.5% 3%;grid-template-rows:minmax(0,1fr) 14%}.question-card h2{font-size:19px}.question-card #feedback{font-size:16px}.question-card small{font-size:10px}.shop .answer{font-size:27px}.ledger small{font-size:11px}.ledger b{font-size:22px}.ledger button{font-size:12px}.dialog-card{padding:35px 4% 3%;font-size:15px;width:80%}.dialog-card h2{font-size:23px}.dialog-card .close{font-size:12px}}
@media(prefers-reduced-motion:reduce){.shop *{scroll-behavior:auto!important}}