/* Runway — daily budget-split toy styles. */

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.head-btns { display: flex; gap: 6px; }

.rn-card { text-align: center; }

#income-line { font-size: 1.1rem; font-weight: 700; margin: 0 0 var(--space-3); }

.rn-slider-row { margin-bottom: var(--space-3); text-align: left; }
.rn-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: 4px; }
.rn-slider-head label { font-weight: 700; }
.rn-slider-head .faint { font-weight: 400; font-size: 0.82rem; margin-left: 6px; }
.rn-pct { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

.rn-slider-row input[type="range"] { width: 100%; }
#sl-needs { accent-color: #16a34a; }
#sl-wants { accent-color: #f59e0b; }
#sl-savings { accent-color: #3b82f6; }

.rn-end-emoji { font-size: 2.6rem; margin-bottom: 4px; }
.rn-end-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 var(--space-3); }

.rn-bar {
  display: flex; height: 22px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.rn-seg { height: 100%; transition: width 200ms var(--ease); }
.rn-seg-needs { background: #16a34a; }
.rn-seg-wants { background: #f59e0b; }
.rn-seg-savings { background: #3b82f6; }

.rn-legend { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 0; font-size: 0.82rem; }
.rn-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); }
.rn-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rn-dot-needs { background: #16a34a; }
.rn-dot-wants { background: #f59e0b; }
.rn-dot-savings { background: #3b82f6; }

#endgame .btn { margin-top: var(--space-2); }
.stats-grid { margin: var(--space-3) 0; }