:root{color-scheme:light;font-family:"Trebuchet MS",Arial,sans-serif;color:#253e59;background:#e7efe5;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a,select{font:inherit}button{min-width:48px;min-height:48px;padding:11px 19px;border:2px solid #82956f;border-radius:17px;background:#fffef3;color:#253e59;font-weight:700;line-height:1.2}button:hover{background:#f2f1d9}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,select:focus-visible{outline:4px solid #6c4892;outline-offset:3px}a{color:#345980}button.primary{background:#386b5b;border-color:#2a5347;color:#fff}button.primary:hover{background:#2e5c4e}h1,h2,p{margin:0}h2{font-size:1.35rem}button[aria-pressed=true]{border-color:#665183;background:#e4d7ef;box-shadow:inset 0 0 0 1px #665183}
.feelings-shell{position:relative;max-width:900px;min-height:calc(100vh - 32px);min-height:calc(100svh - 32px);margin:16px auto;background:#fffbe7;border:2px solid #bccca6;border-radius:30px;padding:20px 30px 30px;overflow:hidden}.feelings-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.feelings-header h1{text-align:center;font-size:1.3rem}.feelings-header button:first-child{justify-self:start}.feelings-header button:last-child{justify-self:end}.feelings-header button{font-size:1rem}.garden-edge{position:absolute;height:15px;left:0;right:0;bottom:0;background:#c7da9b;border-radius:70% 65% 0 0;pointer-events:none}
#activity{max-width:640px;margin:auto}#activity:focus{outline:none}.feeling-prompt{font-size:1.3rem;line-height:1.4;min-height:64px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 0 8px;white-space:pre-line}.feeling-art{display:block;width:100%;height:100%}.target{display:block;border:0;background:transparent!important;box-shadow:none!important;margin:auto;padding:0 15px 5px;width:230px;max-width:100%}.target .feeling-art{height:210px}.word{display:block;letter-spacing:.035em;font-size:1.8rem;line-height:1.2;font-weight:800}.hear-label{display:block;margin-top:5px;font-size:.8rem;font-weight:normal;color:#3f5659}.match-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:440px;margin:14px auto}.expression-choice{display:flex;align-items:center;flex-direction:column;background:#fff2c6;border-color:#a28d47;padding:4px 12px 6px;min-height:154px}.expression-choice .feeling-art{height:116px}.choice-word{min-height:23px;font-size:1rem;display:block}.expression-choice.is-match{outline:3px solid #50754d;outline-offset:3px}.task-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:16px 0 0}.task-actions button{min-width:100px}.matched-space{min-height:154px;display:flex;align-items:center;justify-content:center}.pose-figure{max-width:360px;height:360px;margin:0 auto}.pose .word{text-align:center}.me-options{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:12px;height:282px;max-width:460px;margin:18px auto}.me-options.second-page{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.me-choice{background:#fff2c6;border-color:#a28d47;display:flex;align-items:center;justify-content:flex-start;gap:18px;text-align:left;padding:5px 20px;font-size:1.35rem}.me-choice .feeling-art{width:64px;height:66px;flex:none}.me-options.second-page .me-choice{flex-direction:column;justify-content:center;gap:3px;padding:8px;text-align:center;font-size:1.15rem}.me-options.second-page .feeling-art{height:68px;width:68px}.me-actions{display:grid;grid-template-columns:1fr 1fr;max-width:460px;gap:12px;margin:16px auto}.me-actions button{font-size:1rem;padding:12px 10px}.me-message{height:300px;display:flex;align-items:center;justify-content:center;max-width:460px;margin:18px auto}.me-message .target{width:290px}.me-message .target .word{font-size:1.6rem}.me-message .text-only{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.welcome{display:flex;align-items:center;justify-content:center;gap:25px;margin:0 0 20px}.welcome img{width:90px;height:108px;object-fit:contain}.welcome p{font-size:1.2rem;line-height:1.45;max-width:280px}.mode-choices{display:grid;gap:14px;max-width:460px;margin:auto}.mode-card{display:grid;grid-template-columns:1fr;gap:6px;text-align:left;min-height:92px;padding:16px 22px;background:#e1eee3}.mode-card:nth-child(2){background:#fff0be;border-color:#a38b47}.mode-card:nth-child(3){background:#e4d8ef;border-color:#927aa8}.mode-card strong{font-size:1.4rem}.mode-card span{font-size:1rem;font-weight:normal}.quiet-note{font-size:.95rem;text-align:center;line-height:1.5;margin:22px 0 0;color:#435852}.menu-buttons,.picker-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:480px;margin:14px auto}.menu-buttons button,.picker-buttons button{min-height:62px}.menu-buttons [data-player]{max-width:none;white-space:normal;overflow-wrap:anywhere}.menu-buttons [data-sound]{background:#e1eee3}.picker-buttons .full-width{grid-column:1/-1}.settings-form{max-width:400px;margin:12px auto}.settings-form label{display:block;margin:20px 0;font-size:1.1rem}.settings-form select{display:block;min-height:48px;width:100%;margin-top:8px;border:2px solid #82956f;border-radius:12px;background:#fffef3;padding:10px;color:inherit}.settings-form .check-label{display:flex;align-items:center;gap:12px;min-height:48px}.check-label input{width:26px;height:26px;accent-color:#386b5b}.grown-ups{font-size:1.05rem;line-height:1.65;max-width:560px;margin:10px auto}.grown-ups p{margin:0 0 16px}.grown-ups h2{margin:22px 0 8px}.grown-ups a{display:inline-flex;min-height:48px;align-items:center}.softer{background:#edf0e7}.softer .feelings-shell{background:#fffbee}.softer .feeling-art{filter:saturate(.65)}.softer .expression-choice,.softer .me-choice{background:#f4edcf}.softer .mode-card,.softer .story-art{filter:saturate(.65)}
@media(min-width:700px) and (min-height:800px){.feelings-shell{margin:24px auto;min-height:calc(100vh - 48px)}.feeling-prompt{min-height:90px}.target .feeling-art{height:260px}.target{width:280px}.match-options{margin-top:22px}.expression-choice{min-height:175px}.expression-choice .feeling-art{height:138px}.me-options{height:342px;margin-top:30px}.me-choice{font-size:1.6rem}.me-message{height:380px}}
@media(max-width:600px){.feelings-shell{margin:0;min-height:100vh;min-height:100svh;border-radius:0;border-width:0;padding:14px 16px 27px}.feelings-header{gap:8px}.feelings-header button{padding:10px 13px}.feelings-header h1{font-size:1.15rem}.feeling-prompt{min-height:65px;font-size:1.2rem}.target{width:195px}.target .feeling-art{height:174px}.word{font-size:1.6rem}.match-options{gap:14px;margin:12px auto}.expression-choice{min-height:142px}.expression-choice .feeling-art{height:106px}.matched-space{min-height:142px}.pose-figure{height:320px}.me-choice{font-size:1.3rem}.me-options{margin:8px auto 0}.me-message{margin:8px auto;height:282px}.menu-buttons,.picker-buttons{gap:10px}.menu-buttons button,.picker-buttons button{padding:12px 10px}.welcome{gap:15px}.welcome p{font-size:1.05rem}.mode-card{min-height:85px;padding:13px 20px}.quiet-note{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}button:active{transform:none}}
/* Text enlargement can add rows, never clip labels inside a fixed card. */
.feelings-header{grid-template-columns:auto minmax(0,1fr) auto}.feelings-header h1{overflow-wrap:anywhere}
.feelings-shell button,.feelings-shell button span{min-width:0;overflow-wrap:anywhere}
.feelings-shell button{min-width:48px}
.me-options{height:auto;min-height:282px;grid-template-rows:repeat(3,minmax(86px,auto))}
.me-options.second-page{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));grid-template-rows:none;grid-auto-rows:minmax(132px,auto)}
.me-options.second-page .me-choice{padding:10px;min-height:132px}
.me-message{height:auto;min-height:282px}
@media(min-width:700px) and (min-height:800px){.me-options{min-height:342px}.me-message{min-height:380px}}
@media(min-width:601px) and (max-height:740px){.target .feeling-art{height:196px}.feelings-shell{padding-bottom:26px}}
.expression-choice,.me-choice,.mode-card:nth-child(2){border-color:#927b35}
.mode-card:nth-child(3){border-color:#806590}

/* People teaches a named feeling without requiring a guess or reading. */
body[data-view=people] .feeling-prompt{min-height:0;padding:0}
.people-stage{margin:22px auto 0;max-width:530px;text-align:center}
.story-art{width:100%;height:auto;display:block;max-height:300px}
.people-context{font-size:1.05rem;line-height:1.4;margin:12px auto;max-width:32ch}
.story-feeling{display:flex;align-items:baseline;justify-content:center;gap:.4em;flex-wrap:wrap;background:#e3eee3;border:2px solid #82956f;border-radius:22px;padding:17px 14px;font-size:1.3rem;max-width:390px;margin:0 auto}
.story-feeling strong{font-size:1.65rem;letter-spacing:.025em}
.people-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:390px;margin:18px auto 0}
.people-actions button{min-height:60px;font-size:1.2rem}
.hear-story{display:flex;align-items:center;justify-content:center;gap:10px}
.speaker-icon{width:26px;height:26px;flex:none}
.sound-note{text-align:center;font-size:.8rem;line-height:1.4;margin-top:12px;color:#435852}
@media(max-width:600px){.people-stage{margin-top:24px}.story-art{min-height:205px}.people-context{min-height:3em;display:flex;align-items:center;justify-content:center}.story-feeling{padding:15px 10px}.people-actions{margin-top:16px}}
@media(min-width:601px) and (max-height:740px){.story-art{max-height:280px}}
.target .word.long-word{font-size:1.3rem}

/* All feelings on one board; Sound stays visible on every screen. */
.page-sound{display:flex;justify-content:center;margin:4px 0}
.page-sound button{min-height:48px;padding:8px 16px;font-size:.95rem}
body[data-view=me] .feeling-prompt{min-height:0;padding:0}
body[data-view=me] #activity{max-width:760px}
.me-options{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(76px,auto);height:auto;min-height:0;max-width:760px;gap:8px;margin:12px auto 0}
.me-choice{flex-direction:column;justify-content:center;text-align:center;gap:2px;padding:5px 4px;font-size:1rem;line-height:1.15}
.me-choice .feeling-art{width:44px;height:44px}
.me-actions{max-width:760px;margin-top:10px;gap:8px}
.me-actions button{font-size:.95rem;min-height:48px;padding:8px}
.me-message{min-height:340px;margin:14px auto}
@media(min-width:700px){.me-options{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(140px,auto);gap:12px;margin-top:24px}.me-choice{padding:10px 5px}.me-choice .feeling-art{width:82px;height:86px}.me-message{min-height:420px}.me-message .target{width:320px}.me-message .target .feeling-art{height:290px}}
@media(min-width:601px) and (max-height:740px){.story-art{max-height:225px}.target .feeling-art{height:148px}.pose-figure{height:290px}}
@media(max-width:600px){body[data-view=me] .feelings-shell{padding-top:10px;padding-bottom:18px}.me-options{margin-top:8px}.me-message{min-height:340px}}
@media(max-width:600px){body[data-view=match] .target .feeling-art{height:145px}}

.other-feeling{max-width:520px;margin:18px auto 0}.other-guide{display:flex;align-items:center;gap:20px;margin-bottom:12px}.other-guide:focus{outline:none}.other-guide img{width:68px;height:82px;object-fit:contain}.other-guide label{display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:bold;min-height:64px;cursor:text}.typing-cue{width:70px;height:48px;flex:none}.other-feeling textarea{display:block;width:100%;min-height:116px;resize:vertical;border:3px solid #a58bbe;border-radius:20px;background:#fffef3;color:#253e59;font:inherit;font-size:1.6rem;padding:16px}.other-feeling textarea:focus-visible{outline:3px solid #6c4892;outline-offset:3px}.type-to-say{height:42px;display:flex;align-items:center;justify-content:center;color:#6c5884}.type-to-say svg{height:30px;width:28px}.say-other{width:100%;min-height:94px;display:flex;align-items:center;justify-content:center;gap:22px;font-size:1.6rem;background:#e4d8ef;border-color:#806590;border-width:3px;box-shadow:0 4px 0 #806590}.say-other:hover{background:#d9c9e8}.say-other.ready{background:#386b5b;border-color:#2a5347;color:#fff;box-shadow:0 4px 0 #2a5347}.say-other.ready:hover{background:#2e5c4e}.say-cue{width:74px;height:56px;flex:none}.softer .say-other.ready{background:#466c61}@media(max-width:600px){.other-feeling{margin-top:12px}.other-guide{gap:12px}.other-feeling textarea{min-height:108px}.say-other{min-height:86px}}

.other-question{font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#644f85;text-align:center;margin:0 0 18px;text-wrap:balance}