/* 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}}

/* Shared net USD pressure, centred at zero. */
.fin-meter-track::before{content:'';position:absolute;left:50%;top:-4px;bottom:-4px;border-left:1px solid #f6e1af;z-index:2}
.fin-meter-fill{position:absolute;left:var(--pressure-start,50%);width:var(--pressure-width,0%);background:var(--pressure-color,#e4c577)}
#fin-hud .fin-meter-fill{background:var(--pressure-color,#e4c577)}
#fin-hud .fin-meter-needle{display:block;z-index:3}
.market-copy{text-align:center;display:flex;flex-direction:column;gap:4px;color:var(--paper);text-shadow:1px 2px var(--ink)}
#market-balance{font-size:22px}#market-distance{font-size:15px}#market-source{font-size:12px;color:inherit;text-decoration:none;opacity:.8}
@media(max-width:600px){#market-balance{font-size:17px}#market-distance{font-size:11px}#market-source{font-size:10px}.market-copy{gap:3px}}

/* Mood belongs to Fin; only the right meter follows trades. */
#fin-bottom-panels{display:contents}
#fin-hud .fin-meter-fill{left:0;width:var(--happiness);background:#e4c577}
#fin-hud .fin-meter-track::before{display:none}
#fin-hud .fin-meter-needle{display:none}
#fin-hud .happiness-heading{display:none}
@media(max-width:600px){
 #fin-bottom-panels{position:absolute;left:24px;right:24px;bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;pointer-events:none}
 #fin-bottom-panels #fin-hud,#fin-bottom-panels .controls{position:static;inset:auto;width:100%;margin:0}
 #fin-bottom-panels #fin-hud{display:flex;gap:12px;align-items:center}
 #fin-bottom-panels #fin-hud .fin-avatar{width:48px;height:48px;flex:none}
 #fin-bottom-panels #fin-hud .fin-vitals{width:auto;flex:1;min-width:0}
 #fin-bottom-panels #fin-hud #happiness-mood{font-size:21px}
 #fin-bottom-panels #fin-hud .fin-action-meter{margin-top:5px}
 #fin-bottom-panels #fin-hud .fin-meter-track{height:18px}
 #fin-bottom-panels .controls .fin-action-meter{margin:0}
 #fin-bottom-panels .controls .fin-meter-icon{width:35px;height:37px}
 #fin-bottom-panels .market-copy{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px 8px;padding:0 3px}
 #fin-bottom-panels #market-balance{text-align:left;font-size:17px}
 #fin-bottom-panels #market-distance{text-align:right;font-size:12px}
 #fin-bottom-panels #market-source{grid-column:1/-1;font-size:10px;pointer-events:auto}
}

/* Each threshold belongs directly to its illustrated endpoint. */
.market-endpoints{display:flex;justify-content:space-between;margin:0 0 8px;color:var(--paper);text-shadow:1px 2px var(--ink)}
.market-endpoints>div{display:flex;flex-direction:column;gap:2px;text-align:left}
.market-endpoints>div:last-child{text-align:right}
.market-endpoints strong{font-size:17px}.market-endpoints span{font-size:13px}
#market-distance{font-size:12px}
@media(max-width:600px){
 #fin-bottom-panels .market-endpoints{margin:0 3px 7px}
 #fin-bottom-panels .market-endpoints strong{font-size:16px}
 #fin-bottom-panels .market-endpoints span{font-size:12px}
 #fin-bottom-panels .market-copy{display:flex;flex-direction:column;gap:3px}
 #fin-bottom-panels #market-balance,#fin-bottom-panels #market-distance{text-align:center}
 #fin-bottom-panels #market-distance{font-size:11px}
}

.market-endpoints{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 5px;font-weight:bold}
.market-endpoints #sell-threshold{text-align:left}.market-endpoints #buy-threshold{text-align:right}
.market-endpoints span{font-size:14px}.market-bet{text-align:center}
.header-x{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;color:var(--paper);filter:drop-shadow(1px 2px 0 var(--ink));text-decoration:none}
.header-x:hover{color:#ffeac0}header nav{align-items:center}
@media(max-width:600px){#fin-bottom-panels .market-endpoints{margin:0 3px 5px}#fin-bottom-panels .market-endpoints span{font-size:13px}.header-x svg{width:18px;height:18px}header nav{gap:12px}}

/* One live dollar amount between the two thresholds. */
#fin-bottom-panels .controls #market-balance{font-size:15px;text-align:center;white-space:nowrap}
@media(max-width:600px){#fin-bottom-panels .controls #market-balance{font-size:14px}}

.market-total{display:flex;flex-direction:column;align-items:center;gap:3px}.market-endpoints .market-total-label{font-size:9px;letter-spacing:.06em;white-space:nowrap}#fin-bottom-panels .market-endpoints .market-total-label{font-size:9px}