.town-page{max-width:1280px;margin:auto;padding:12px 18px 28px}.town-page>h1{font-size:clamp(22px,3vw,34px);margin:0;color:#183c55}.town-page>p{margin:4px 0 12px}.town{--u:min(1cqw,1.77778cqh);container-type:size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:3px solid #dcbf91;border-radius:22px;background:#fff5de url('./assets/town.webp') center/cover;color:#183c55;font:900 16px 'Zen Maru Gothic',sans-serif}.town *{box-sizing:border-box}.town [hidden]{display:none!important}.town button{font:inherit;line-height:1.5;cursor:pointer;color:#183c55;background:#fff9e8;border:2px solid #c9b087;border-radius:12px;padding:.4em .7em}.town button:focus-visible{outline:4px solid #17839c;outline-offset:2px}.town button:disabled{cursor:default;opacity:.5}.town button:hover{filter:brightness(1.03)}.base{height:100%;padding:1.6% 3% 2.3%;display:flex;flex-direction:column}.game-tools{height:10%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px}.game-tools strong{font-size:calc(var(--u)*2.4);white-space:nowrap;color:#b94b36}.game-tools nav{display:flex;gap:calc(var(--u)*.45)}.game-tools button{font-size:calc(var(--u)*1.05);padding:.3em .6em}.cover{flex:1;min-height:0;display:grid;grid-template-columns:60% 38%;grid-template-rows:minmax(0,1fr) 21% 6%;gap:2%}.sample-window{position:relative;min-height:0;display:grid;place-items:center}.sample-window img{width:100%;height:100%;object-fit:contain;border-radius:20px}.sample-window b{position:absolute;top:6%;left:7%;background:#fff7e5;border:3px solid #173b54;border-radius:24px;padding:.1em .7em;color:#c74832;font:700 calc(var(--u)*4)/1.5 Fredoka,sans-serif}.invitation{background:url('./assets/caption.webp') center/100% 100%;padding:10% 9%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7%;text-align:center;min-height:0}.invitation h2{font-size:calc(var(--u)*3);line-height:1.5;margin:0;color:#be4b36}.invitation p{font-size:calc(var(--u)*1.9);line-height:1.6;margin:0}.invitation small{font-size:calc(var(--u)*1.4);line-height:1.6}.town .primary{background:transparent url('./assets/start.webp') center/100% 100%;border:0;color:#fffaf0;box-shadow:none;text-shadow:0 1px #863223;padding:0 4% 2%}.cover .primary{grid-column:1/-1;width:48%;justify-self:center;font-size:calc(var(--u)*2.4)}.limit-note{grid-column:1/-1;text-align:center;margin:0;font-size:calc(var(--u)*1.2);line-height:1.5}.game{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 17% 18% 10% 4%;gap:1.5%;padding-top:1%}.display{min-height:0;display:grid;grid-template-columns:68% 30%;gap:2%}.picture-window{min-height:0;display:flex;align-items:center;justify-content:center;background:#fff8e7;border:2px solid #d5bb94;border-radius:16px;overflow:hidden}.picture-window img{width:100%;height:100%;object-fit:contain}.caption{background:url('./assets/caption.webp') center/100% 100%;padding:7% 10%;display:flex;flex-direction:column;justify-content:center;gap:8%;min-height:0;text-align:center}.caption p{font-size:calc(var(--u)*1.9);line-height:1.6;margin:0}.caption h2{font-size:calc(var(--u)*1.6);line-height:1.6;margin:0;color:#b64431}.answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1%;min-height:0}.town .answer{min-width:0;min-height:0;width:100%;height:100%;padding:3% 7% 11%;border:0;border-radius:20px;background:transparent url('./assets/bubble.webp') center/100% 100%;font:700 calc(var(--u)*1.85)/1.3 Fredoka,sans-serif;position:relative}.town .answer:disabled{opacity:1}.town .answer.correct{outline:4px solid #287b52;outline-offset:-6px}.town .answer.selected-wrong{outline:3px dashed #b9503c;outline-offset:-6px}.practice{display:grid;grid-template-columns:minmax(0,1fr) 30%;grid-template-rows:67% 33%;gap:0 2%;align-items:center;background:#f9e4bd;border:2px solid #cfb082;border-radius:15px;padding:0 2%;min-height:0}.practice>div{display:flex;align-items:center;justify-content:center;gap:4%;min-width:0}.practice strong{font:700 calc(var(--u)*2.55)/1.35 Fredoka,sans-serif;white-space:nowrap}.practice span{font-size:calc(var(--u)*1.3);white-space:nowrap}.practice button{font-size:calc(var(--u)*1.4);padding:.25em .4em;background:#bfe4dc;border-color:#599d94;white-space:nowrap}.practice p{grid-column:1/-1;text-align:center;font-size:calc(var(--u)*1.2);line-height:1.5;margin:0;white-space:nowrap}.town[data-phase=correct] #feedback{color:#246e49}.counters{display:flex;align-items:center;justify-content:center;gap:2%;min-height:0}.counters>span{width:20%;height:100%;background:url('./assets/stamp.webp') center/100% 100%;display:flex;align-items:center;justify-content:center;gap:6%;padding:1% 2%;min-height:0}.counters small{font-size:calc(var(--u)*1.1);white-space:nowrap}.counters b{font:700 calc(var(--u)*2.3)/1.25 Fredoka,sans-serif}.counters button{font-size:calc(var(--u)*1.1);padding:.25em .5em;white-space:nowrap;background:#ffede0}.game>small{text-align:center;font-size:calc(var(--u)*1.1);line-height:1.5;background:#fff4dce8;border-radius:8px}.parent-note{font-size:14px;line-height:1.7;padding:12px}.town:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}.dialog{position:absolute;inset:0;z-index:5;background:#163c55ad;display:grid;place-items:center;padding:3%}.dialog-card{position:relative;background:#fff7e7;border:4px solid #c99b66;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 small{font-size:.8em}.dialog-card input{width:100%;accent-color:#347c84}.dialog-card label{display:flex;justify-content:space-between}.dialog-card .primary{min-height:70px}
@media(orientation:portrait) and (max-width:680px){.town-page{padding:8px}.town{height:min(850px,calc(100dvh - 12px));aspect-ratio:auto;--u:1cqw;border-width:2px}.base{padding:3% 3% 4%}.game-tools{height:78px;flex-direction:column;justify-content:center;gap:5px}.game-tools strong{font-size:24px}.game-tools nav{width:100%;justify-content:space-between;gap:2px}.game-tools button{font-size:11px;padding:.35em .3em}.cover{grid-template-columns:1fr;grid-template-rows:43% 31% 18% 5%;gap:1%}.sample-window img{object-fit:contain}.sample-window b{font-size:32px}.invitation{padding:7% 10%;gap:4px;background-size:100% 100%}.invitation h2{font-size:25px}.invitation h2 br{display:none}.invitation p{font-size:18px}.invitation small{font-size:14px}.invitation small br{display:none}.cover .primary{width:85%;font-size:25px}.limit-note{font-size:12px}.game{grid-template-rows:minmax(0,1fr) 23% 20% 8% 4%;gap:1.5%}.display{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 32%;gap:2%}.caption{padding:3px 5%;gap:0;background:#fff2d7;border:1px dashed #b3956c;border-radius:10px}.caption p{font-size:17px;line-height:1.5}.caption h2{font-size:14px;line-height:1.5}.answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:2%}.town .answer{font-size:19px;padding:3px 9px 12px}.practice{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 30% 22%;gap:0;padding:2px 3%}.practice>div{flex-direction:column;gap:0}.practice strong{font-size:24px}.practice span{font-size:14px}.practice button{font-size:15px;justify-self:center;padding:1px 12px}.practice p{font-size:11px}.counters{gap:1%}.counters>span{width:23%;padding:2px 3px;flex-direction:column;gap:0}.counters small{font-size:10px}.counters b{font-size:19px}.counters button{font-size:10px;white-space:normal;max-width:25%;padding:.35em}.game>small{font-size:11px}.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}.town:fullscreen{height:100dvh}}
@media(orientation:landscape) and (max-height:520px){.base{padding:1% 2% 1.5%}.game-tools{height:38px}.game-tools strong{font-size:20px}.game-tools button{font-size:11px;padding:.2em .4em}.invitation h2{font-size:24px}.invitation p{font-size:16px;line-height:1.4}.invitation small{font-size:11px}.cover .primary{font-size:21px}.limit-note{font-size:11px}.sample-window b{font-size:29px}.caption p{font-size:15px}.caption h2{font-size:13px}.town .answer{font-size:17px}.practice strong{font-size:23px}.practice span{font-size:12px}.practice button{font-size:13px}.practice p{font-size:11px}.counters small{font-size:10px}.counters b{font-size:20px}.counters button{font-size:10px}.game>small{font-size:10px}.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){.town *{scroll-behavior:auto!important}}