*{box-sizing:border-box}.feel-page{max-width:1220px;margin:22px auto;padding:0 16px;font-family:'Zen Maru Gothic','Meiryo',sans-serif;color:#502d37}.feel-page>h1,.feel-page>p{text-align:center}.feelings{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:3px solid #cba49b;border-radius:22px;background:#f6d1bc url('./assets/room.webp') center/cover;color:#502d37;font:700 clamp(13px,1.4cqw,23px)/1.5 'Zen Maru Gothic','Meiryo',sans-serif;box-shadow:0 14px 30px #5e3d2922;isolation:isolate}.feelings button,.feelings input{font:inherit}.feelings button{font-weight:900;cursor:pointer;border:2px solid #dcc5ab;border-radius:14px;background:#fff9e9;color:#502d37;padding:.5em .8em;box-shadow:0 3px 0 #68433430;line-height:1.35}.feelings button:hover{filter:brightness(1.03)}.feelings button:focus-visible{outline:3px solid #583449;outline-offset:3px}.feelings button:disabled{cursor:default}.feelings [hidden]{display:none!important}.feelings .primary{background:#f18372;border-color:#ffb9a1}.feelings #base{height:100%}.game-tools{height:12%;padding:1% 2%;display:flex;align-items:center;justify-content:space-between;gap:1%;background:#fff5eacb}.game-tools>strong{font-size:1.45em;white-space:nowrap}.game-tools nav{display:flex;gap:.4em}.game-tools button{font-size:.8em;padding:.5em;white-space:nowrap}.game-tools button:disabled{opacity:.5}.cover{height:88%;display:grid;grid-template-columns:44% 54%;gap:2%;align-items:center;padding:2% 4%}.welcome{text-align:center;display:flex;flex-direction:column;gap:.8em;align-items:center}.welcome h2{font-size:3.4em;line-height:1.35;margin:0;color:#62343c;background:#fff9e9bf;border-radius:45% 35% 40% 30%;padding:.15em .3em}.welcome h2::first-line{color:#c85e52}.welcome p{font-size:1.4em;line-height:1.5;margin:0}.welcome small{font-size:.85em}.welcome .primary{font-size:1.25em;min-width:85%;padding:.7em .8em}.portraits{height:88%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5% 4%;align-content:center;border-top:4px solid #a38157;padding-top:4%}.portraits figure{min-height:0;margin:0;background:#fff9e9;padding:7%;box-shadow:0 4px 9px #69472930;display:flex;flex-direction:column;transform:rotate(-3deg);position:relative}.portraits figure:nth-child(even){transform:rotate(3deg)}.portraits figure::before{content:'';position:absolute;top:-10%;left:50%;height:12%;width:2px;background:#927554}.portraits img{width:100%;min-height:0;flex:1;object-fit:cover}.portraits figcaption{text-align:center;font-size:.95em;white-space:nowrap;margin-top:.3em}.game{height:88%;padding:1% 4% 1%;display:grid;grid-template-rows:minmax(0,73%) minmax(0,16%) minmax(0,11%);gap:0}.story-zone{display:flex;justify-content:center;align-items:center;gap:3%;min-height:0;padding-bottom:1%}.picture-frame{min-width:0;max-width:80%;margin:0;background:#fff8e8;padding:1%;box-shadow:0 5px 12px #5b372129;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.picture-frame img{width:100%;min-height:0;flex:1;object-fit:contain;display:block;background:#fff8e9}.picture-frame figcaption{font-size:1.15em;text-align:center;line-height:1.45;flex:none;padding:.1em .2em;white-space:nowrap}.records{width:15%;max-width:170px;display:flex;flex-direction:column;gap:.55em;align-items:center;flex:none}.records>div{width:4.6em;height:4.6em;border:2px dashed #d98c88;border-radius:50%;background:#ffebdf;box-shadow:0 0 0 4px #fff8e9;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.1}.records>div:nth-child(2){background:#e5f1d9;border-color:#7aa68b}.records>div:nth-child(3){background:#dfedf8;border-color:#81a2b7}.records small{font-size:.64em}.records b{font-size:1.65em}.records p{background:#fff8e9e6;padding:.5em;text-align:center;font-size:.7em;line-height:1.6;border:2px solid #d5b998;border-radius:4px;margin:.3em 0 0}.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:1%;height:100%;padding:.4% 0}.feelings .answer{min-width:0;position:relative;height:100%;background:var(--card) center/100% 100% no-repeat;border:4px solid transparent;border-radius:14px;box-shadow:none;padding:.2em .3em;font-size:1.5em;line-height:1.4;white-space:nowrap}.feelings .answer.correct{border-color:#4b905f;box-shadow:inset 0 0 0 2px #fff9e9}.feelings .answer.selected-wrong{border-color:#ac7b67}.answer-mark{position:absolute;right:6%;top:4%;font-size:.65em;color:#397b48;font-weight:900}.feedback-row{display:flex;align-items:center;justify-content:center;position:relative;gap:1%;min-height:0;padding-top:.3%}.feedback-row>div{text-align:center;flex:1;min-width:0;line-height:1.3}.feedback-row strong{font-size:1.05em;display:block;background:#fff9e9df;border-radius:12px;padding:.15em .4em}.feedback-row small{display:block;font-size:.62em;margin-top:.2em}.feedback-row button{flex:none;font-size:.7em;padding:.35em .6em}.dialog{position:absolute;inset:0;display:grid;place-items:center;background:#50323899;padding:4%;z-index:10;backdrop-filter:blur(3px)}.dialog-card{position:relative;width:min(660px,92%);max-height:100%;overflow:auto;background:#fff8e8;border:7px solid #ebbfb0;border-radius:24px;padding:4%;line-height:1.7;font-size:1.06em}.dialog-card h2{margin:0 4em .6em 0}.dialog-card #closeDialog{position:absolute;right:4%;top:4%;font-size:.85em}.dialog-card p{margin:.7em 0}.dialog-card small{display:block;font-size:.8em}.dialog-card #settingsPanel{display:flex;flex-direction:column;gap:1em}.dialog-card input{width:100%;accent-color:#c8645d}.parent-note{font-size:13px;line-height:1.9;max-width:900px;margin:24px auto}.feelings:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}@container(max-width:700px){.game-tools{height:15%;flex-direction:column;justify-content:center;gap:3px;padding:1%}.game-tools>strong{font-size:1.25em}.game-tools button{font-size:.72em;padding:.35em}.cover,.game{height:85%}.welcome h2{font-size:2.6em}.welcome p{font-size:1em}.welcome .primary{font-size:1em}.welcome small{font-size:.7em}.portraits figcaption{font-size:.7em}.records>div{width:3.8em;height:3.8em}.records p{font-size:.6em}.picture-frame figcaption{font-size:.95em}.feelings .answer{font-size:1.15em;border-width:3px}.feedback-row strong{font-size:.78em}.feedback-row small{font-size:.58em}.dialog-card{font-size:.93em;padding:4%;border-width:4px}}@media(max-width:600px) and (orientation:portrait){.feelings{aspect-ratio:auto;height:820px;max-height:100dvh;font-size:15px;border-radius:14px}.game-tools{height:11%;min-height:64px;flex-direction:column;justify-content:center;gap:.3em;padding:1%}.game-tools>strong{font-size:1.32em}.game-tools button{font-size:.8em;padding:.4em}.cover{height:89%;display:flex;flex-direction:column;gap:2%;padding:3%}.welcome{width:100%;height:43%;gap:2%}.welcome h2{font-size:2.35em;line-height:1.25}.welcome p{font-size:1.05em;line-height:1.35}.welcome p br{display:none}.welcome small{font-size:.7em}.welcome .primary{font-size:1em;padding:.55em;min-width:90%}.portraits{width:92%;height:52%;gap:5% 4%;padding-top:4%}.portraits figcaption{font-size:.7em}.game{height:89%;padding:2% 3%;grid-template-rows:minmax(0,66%) minmax(0,24%) minmax(0,10%)}.story-zone{flex-direction:column;gap:5px;justify-content:start;padding:0}.records{order:-1;flex-direction:row;justify-content:center;width:100%;max-width:none;height:59px;gap:20px}.records>div{width:54px;height:54px;flex:none}.records small{font-size:.58em}.records b{font-size:1.4em}.records p{display:none}.picture-frame{max-width:100%;padding:2%;flex:none}.picture-frame figcaption{font-size:.9em;line-height:1.6;white-space:normal}.answers{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4%;padding:2% 0}.feelings .answer{font-size:1.18em;border-width:3px}.feedback-row{gap:1%;padding-top:1%}.feedback-row strong{font-size:.74em;line-height:1.4;padding:.15em .2em}.feedback-row small{font-size:.52em}.feedback-row button{font-size:.6em;padding:.5em .3em}.dialog-card{font-size:.95em;padding:5%;border-width:4px}.dialog-card h2{font-size:1.2em}.dialog-card small{font-size:.82em}}@media(max-height:560px) and (orientation:landscape){.feelings{font-size:13px}.game-tools{height:12%;padding:.5% 2%}.game-tools>strong{font-size:1.2em}.game-tools button{font-size:.75em;padding:.35em}.game{height:88%;padding:.5% 4%;grid-template-rows:minmax(0,72%) minmax(0,17%) minmax(0,11%)}.records{gap:.5em;max-width:85px}.records>div{width:3.4em;height:3.4em}.records b{font-size:1.4em}.records p{font-size:.55em;padding:.3em;margin:0}.picture-frame figcaption{font-size:.9em;line-height:1.4}.feelings .answer{font-size:1.25em}.feedback-row strong{font-size:.75em}.feedback-row small{font-size:.55em}.welcome{gap:.4em}.welcome h2{font-size:2.9em}.welcome p{font-size:1.1em}.welcome small{font-size:.7em}.welcome .primary{font-size:1em;padding:.5em}.dialog-card{font-size:.87em;padding:3%;border-width:4px}.dialog-card p{margin:.4em 0}}@media(prefers-reduced-motion:reduce){.feelings *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.feelings .answer:nth-child(1){background-image:url('./assets/card-0.webp')}
.feelings .answer:nth-child(2){background-image:url('./assets/card-1.webp')}
.feelings .answer:nth-child(3){background-image:url('./assets/card-2.webp')}
.feelings .answer:nth-child(4){background-image:url('./assets/card-3.webp')} .feelings .answer{background-size:100% 100%;background-repeat:no-repeat;background-position:center}@media(max-width:600px) and (orientation:portrait){.game{grid-template-rows:minmax(0,54%) minmax(0,31%) minmax(0,15%)}.feelings .answer{font-size:1.35em}.feedback-row{align-items:center}.feedback-row strong{font-size:.85em}.feedback-row small{font-size:.65em}.feedback-row button{font-size:.7em}.picture-frame figcaption{font-size:1em}} .story-zone{container-type:size}.picture-frame{width:min(78cqw,calc((100cqh - 48px)*1.428571 + 20px));height:100cqh}@media(max-width:600px) and (orientation:portrait){.picture-frame{width:min(97cqw,calc((100cqh - 112px)*1.428571 + 20px));height:min(calc(100cqh - 64px),calc(97cqw*.7 + 48px))}}@media(max-width:600px) and (orientation:portrait){.cover .welcome{height:auto;flex:none;gap:.5em}.cover .portraits{height:auto;flex:1;min-height:0}}@media(max-width:600px) and (orientation:portrait){.cover .portraits{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3% 6%}.cover .portraits img{object-fit:contain;background:#fff8e9}}