.mood-section{margin:24px 0 30px}.mood-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.mood-eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--muted)}.mood-heading h2{font-size:20px;margin:7px 0}.mood-heading p,.mood-hint{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.mood-count{font-size:11px;white-space:nowrap;color:var(--muted)}.mood-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.mood-grid .mood-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;min-width:0;padding:17px 13px;text-align:left;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface) 74%,transparent);backdrop-filter:blur(18px);color:var(--text);transition:background .2s,transform .2s,border-color .2s;cursor:pointer}.mood-card:hover{transform:translateY(-3px);border-color:var(--mood)}.mood-grid .mood-card[aria-pressed=true]{background:color-mix(in srgb,var(--mood) 18%,var(--surface));border-color:var(--mood)}.mood-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--mood) 14%,transparent);color:var(--mood);margin-bottom:9px}.mood-icon svg{width:21px;height:21px}.mood-name{font-size:12px;font-weight:600;line-height:1.5}.mood-card small{font-size:10px;line-height:1.5;color:var(--muted)}.mood-check{position:absolute;right:10px;top:12px;color:var(--mood);opacity:0}.mood-check svg{width:13px;height:13px}.mood-card[aria-pressed=true] .mood-check{opacity:1}.mood-active{display:flex;align-items:center;gap:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:16px;padding:16px;margin-top:13px;animation:mood-in .25s ease-out}.mood-active>div{flex:1}.mood-active strong{font-size:13px}.mood-active p{font-size:12px;color:var(--muted);line-height:1.6;margin:4px 0}.mood-active small{font-size:11px;color:var(--muted)}.mood-active-icon{color:var(--accent)}.mood-active-icon svg{width:23px;height:23px}.mood-active button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;font-size:12px;white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text)}.mood-active button svg{width:15px;height:15px}.mood-hint{margin-top:12px;font-size:11px}@keyframes mood-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:1250px){.mood-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.mood-heading h2{font-size:18px}.mood-count{display:none}.mood-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mood-grid .mood-card{padding:14px;gap:3px}.mood-icon{margin-bottom:7px}.mood-grid .mood-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center}.mood-card:last-child .mood-icon{grid-row:1/3;margin:0}.mood-card:last-child .mood-check{position:absolute}.mood-active{flex-wrap:wrap;align-items:flex-start}.mood-active>div{min-width:0;flex-basis:calc(100% - 42px)}.mood-active button{width:100%}.mood-section{margin-top:22px}}@media(prefers-reduced-motion:reduce){.mood-card,.mood-active{transition:none!important;animation:none!important}}
/* Compact scenes: icon and copy share a row instead of a tall card. */
.mood-section{margin:18px 0 22px}
.mood-heading{margin-bottom:12px}
.mood-eyebrow{display:none}
.mood-heading h2{font-size:17px;margin:0 0 5px}
.mood-grid{display:flex;flex-wrap:wrap;gap:8px}
.mood-grid .mood-card,.mood-grid .mood-card:last-child{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:1px;flex:0 1 182px;min-height:66px;padding:11px 22px 11px 11px;border-radius:14px}
.mood-card .mood-icon,.mood-card:last-child .mood-icon{grid-column:1;grid-row:1/3;width:32px;height:32px;margin:0;border-radius:10px}
.mood-icon svg{width:18px;height:18px}
.mood-card .mood-name{grid-column:2;grid-row:1;font-size:13px;line-height:1.4}
.mood-card small{grid-column:2;grid-row:2;font-size:12px;line-height:1.4}
.mood-check{right:6px;top:7px}
.mood-check svg{width:11px;height:11px}
.mood-card:hover{transform:translateY(-2px)}
.mood-hint{margin-top:9px}
.mood-active{padding:12px 14px;margin-top:10px;border-radius:14px}
@media(max-width:600px){.mood-grid .mood-card,.mood-grid .mood-card:last-child{flex:1 1 calc(50% - 8px);min-width:0;padding:10px 15px 10px 10px;column-gap:8px;min-height:64px}.mood-grid .mood-card:last-child{flex-grow:0;flex-basis:calc(50% - 4px)}.mood-name{overflow-wrap:normal}.mood-heading p{font-size:11px}}
@media(min-width:1300px){.mood-grid .mood-card,.mood-grid .mood-card:last-child{flex-basis:calc((100% - 48px)/7);padding-right:15px;column-gap:8px}.mood-card .mood-name{font-size:13px;line-height:1.4}.mood-card small{font-size:12px;line-height:1.4}}
/* Eight scenes form balanced rows at every breakpoint. */
.mood-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mood-grid .mood-card:last-child{grid-column:auto}
@media(max-width:600px){.mood-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1700px){.mood-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}