/* dev/ui-modern stats card: tiles (icon badge, label, big value, slim bar). */
.bar.sbar[data-bar=happy]{--c:#ff5f87;--c2:#ff8fa8;--cd:#c2224d}
.bar.sbar[data-bar=health]{--c:#22b864;--c2:#5ad98f;--cd:#127a40}
.bar.sbar[data-bar=smarts]{--c:#3b82f6;--c2:#7cb0ff;--cd:#1d4fb8}
.bar.sbar[data-bar=looks]{--c:#a855f7;--c2:#cb93ff;--cd:#6d28c4}
.bar.sbar[data-bar=fame]{--c:#f59e0b;--c2:#ffc65a;--cd:#a15c00}
.sbadge{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;color:#fff;background:linear-gradient(180deg,var(--c2),var(--c));box-shadow:inset 0 1px 0 #fff6,0 2px 0 var(--cd),0 3px 6px #0002}
.sbadge svg{display:block;filter:drop-shadow(0 1px 0 #0003)}
.bar.sbar .ltx{font-weight:800;color:#24304a;letter-spacing:.2px}
.bar.sbar .val{display:flex;align-items:center;justify-content:flex-end;gap:4px;position:relative}
.bar.sbar .val b{font-weight:900;color:#1b2433;font-variant-numeric:tabular-nums}
.bar.sbar .delta{position:absolute;right:0;top:-14px;font-style:normal;font-size:11px;font-weight:900;padding:0 5px;border-radius:8px;color:#fff;opacity:0}
.bar.sbar.up .delta{background:#16a34a}.bar.sbar.down .delta{background:#dc2626}
/* shared chunky bar: flat crisp fill + thin top highlight, no muddy gloss */
html :is(.stats,.stile) .bar.sbar .track{background:#e8ebf2;box-shadow:inset 0 1px 2px #0000001f;border-radius:99px;overflow:hidden;position:relative}
html :is(.stats,.stile) .bar.sbar .fill{background:var(--c);border-radius:99px;box-shadow:inset 0 3px 0 #ffffff47,inset 0 -2px 0 #00000014;transition:width .7s cubic-bezier(.2,.9,.3,1.1)}
html :is(.stats,.stile) .bar.sbar .fill::after{content:none}
/* change animation */
.bar.sbar.chg .delta{animation:s-pop 1.6s ease-out forwards}
.bar.sbar.chg .sbadge{animation:s-bump .5s ease-out}
.bar.sbar.up .track{animation:s-glow-up 1s ease-out}.bar.sbar.down .track{animation:s-glow-dn 1s ease-out}
@keyframes s-pop{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
@keyframes s-bump{40%{transform:scale(1.18) rotate(-6deg)}}
@keyframes s-glow-up{30%{box-shadow:0 0 0 3px #16a34a55}}@keyframes s-glow-dn{30%{box-shadow:0 0 0 3px #dc262655}}
@media (prefers-reduced-motion:reduce){.bar.sbar *{animation:none!important;transition:none!important}.bar.sbar .delta{opacity:1}}
/* card */
html .stats:has(.sbar){background:#fffffff5;border:0;border-radius:20px;margin:0 12px 8px;padding:14px 14px 16px;box-shadow:0 0 0 1px #0000000d,0 10px 28px #0f1a3a33;gap:10px}
/* home: pill rows — badge · label · chunky bar · value */
html .stats .bar.sbar{gap:10px;font-size:14px}
html .stats .bar.sbar .lbl{width:118px;gap:8px}
html .stats .bar.sbar .track{height:16px}
html .stats .bar.sbar .val{width:34px;font-size:15px}
/* detail stats screen (profile): tiles — 2-col mini cards, big coloured number, slim bar */
.stile{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
html .stile .bar.sbar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"l l v" "t t t";gap:8px 6px;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 9%,#fff));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 30%,#fff),0 3px 0 color-mix(in srgb,var(--c) 22%,#fff)}
html .stile .bar.sbar:last-child:nth-child(odd){grid-column:1/-1}
html .stile .bar.sbar .lbl{grid-area:l;width:auto;gap:8px;font-size:13.5px}
html .stile .bar.sbar .val{grid-area:v;width:auto;font-size:20px}
html .stile .bar.sbar .val b{color:var(--cd)}
html .stile .bar.sbar .track{grid-area:t;height:10px}
/* night/dusk: card stays light for contrast, gets a soft halo */
html[data-tod=night] .stats:has(.sbar),html[data-tod=dusk] .stats:has(.sbar){box-shadow:0 0 0 1px #ffffff30,0 10px 30px #0008,0 0 36px #ffd36b1f}

/* keep the first-run tip from covering the card on phones */
#app:has(.tip) .stats:has(.sbar){margin-bottom:64px}