/* Painted endpoint sprites and a single shared happiness meter above the actions. */
.controls{width:290px}.controls .actions{justify-content:space-between}
.fin-action-meter{margin:0 0 8px;color:var(--paper);text-shadow:1px 2px var(--ink)}
.fin-action-meter .happiness-heading{margin:0 48px -3px;font-size:14px;align-items:baseline}
.fin-action-meter .happiness-heading label{font-style:italic;font-weight:400}
.fin-meter-row{display:flex;align-items:center;gap:3px}
.fin-meter-icon{display:block;width:60px;height:60px;object-fit:contain;flex:none;filter:drop-shadow(1px 2px 0 #171b1480)}
.fin-meter-track{position:relative;flex:1;height:17px;border:2px solid #231e19;border-radius:8px 5px 7px 4px;background:#342f25;box-shadow:0 0 0 1px #e5d2a2,inset 0 2px 0 #0004}
.fin-meter-fill{height:100%;width:var(--happiness);max-width:100%;border-radius:inherit;background:#d9bd76;transition:width .4s ease}
.fin-meter-needle{position:absolute;top:-5px;bottom:-5px;left:var(--happiness);width:5px;border:1px solid #231e19;border-radius:3px;background:#f7e8bd;transform:translateX(-50%);transition:left .4s ease}
#fin-hud .fin-vitals{width:auto}#fin-hud #happiness-mood{margin-top:7px}
@media(max-width:600px){.controls{width:190px}.fin-meter-icon{width:40px;height:46px}.fin-action-meter .happiness-heading{margin:0 20px -2px;font-size:12px}.fin-action-meter #happiness-value{font-size:11px}.fin-meter-track{height:13px}.fin-action-meter{margin-bottom:4px}#fin-hud{gap:6px}#fin-hud .star-billing{display:block;font-size:12px}#fin-hud .star-billing strong{display:block;font-size:24px}#fin-hud .fin-avatar{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.fin-meter-fill,.fin-meter-needle{transition:none}}

/* Keep the score with Fin's changing portrait. */
#fin-hud .fin-vitals{width:210px}
#fin-hud .fin-action-meter{margin:9px 0 0}
#fin-hud .happiness-heading{margin:0 0 6px;font-size:13px}
#fin-hud .fin-meter-icon{display:none}
#fin-hud .fin-meter-track{height:15px}
#fin-hud .fin-meter-fill{background:linear-gradient(90deg,#bc6646,#e4c577)}
.controls{width:250px}
@media(max-width:600px){
 #fin-hud{bottom:max(25px,env(safe-area-inset-bottom));gap:9px;align-items:center}
 #fin-hud .fin-vitals{width:125px}
 #fin-hud .star-billing{display:flex;align-items:baseline;gap:4px;margin-bottom:2px}
 #fin-hud .star-billing strong{margin-left:0}
 #fin-hud #happiness-mood{margin-top:3px}
 #fin-hud .fin-action-meter{margin-top:7px}
 #fin-hud .happiness-heading{font-size:11px;margin-bottom:5px}
 #fin-hud .fin-meter-track{height:12px}
 .controls{width:110px;bottom:max(27px,env(safe-area-inset-bottom))}
 .controls .actions{gap:6px}
 .controls .actions button{font-size:18px}
}
@media(max-width:359px){#fin-hud .fin-vitals{width:107px}#fin-hud .fin-avatar{width:46px;height:46px}.controls{width:102px}}

/* Both meters share the score; Fin's portrait gets the chunky bar. */
.controls{width:290px}
#fin-hud .fin-meter-track{height:27px;border-width:3px;border-radius:5px;background:#382e25}
#fin-hud .fin-meter-track:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),#30281dbb calc(10% - 2px),#30281dbb 10%)}
#fin-hud .fin-meter-needle{display:none}
#fin-hud .fin-meter-fill{border-radius:2px;background:#e4c577;box-shadow:inset 0 4px #fff0bc66,inset 0 -4px #9b733744}
@media(max-width:600px){
 #fin-hud .fin-vitals{width:105px}
 #fin-hud .fin-meter-track{height:23px}
 .controls{width:160px}
 .controls .fin-meter-icon{width:35px;height:42px}
 .controls .happiness-heading{margin:0 9px -1px;font-size:11px}
 .controls .actions button{font-size:20px}
}
@media(max-width:359px){#fin-hud .fin-vitals{width:94px}#fin-hud{gap:6px}.controls{width:135px}.controls .fin-meter-icon{width:29px;height:36px}.controls .actions button{font-size:18px}}

/* Emotion is the headline; the meter conveys mood without a numeric score. */
#fin-hud #happiness-mood{display:block;font-size:30px;line-height:1.08;font-weight:700;margin-top:0}
@media(max-width:600px){#fin-hud #happiness-mood{font-size:21px;line-height:1.1;margin-top:0}}