/* Build budget of the week (budget.js, budget-view in view.js). Tokens and parts from menu.css (docs/STYLEGUIDE.md): dark glass with one
   lit left edge, the bar is a thin orbit line – lit up to what was used, with a small sun on its end – no percent bar, no tile, no
   soft shadow, no emoji. Colour = state: aurora while there is plenty, sun when it runs low, ember when it is used up. Texts at
   least 22 px and milk on glass (STYLEGUIDE 3, 4). On the TV the box sits in the free top right corner of the Werft screens (the top
   bar is not shown there); in the main menu in the credits at the bottom right (on a phone under the top bar, only with "Neues Spiel
   wünschen" focused); on a phone it flows in the column. */
.budget {
  --tone: var(--aurora);
  --tone-glow: rgba(124, 240, 178, .5);
  --used: 0;
  width: calc(var(--u) * 600);
  max-width: 100%;
  padding: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 14) calc(var(--u) * 22);
  text-align: left;
  background: rgba(14, 15, 20, .78);
  border-radius: 6px;
  text-shadow: 0 0 calc(var(--u) * 12) rgba(4, 5, 8, .9);
  transition: border-color 320ms var(--ease);
}
.budget[hidden] { display: none; }
.budget[data-level="low"] { --tone: var(--sun); --tone-glow: var(--sun-glow); }
.budget[data-level="empty"] { --tone: var(--ember); --tone-glow: rgba(255, 122, 89, .5); }

/* the orbit: a hair-thin track, lit from the left up to what was used; the small sun sits on the end of the lit part */
.budget-bar { position: relative; height: calc(var(--u) * 14); margin: 0 calc(var(--u) * 7) calc(var(--u) * 10); }
.budget-bar::before { content: ''; position: absolute; left: calc(var(--u) * -7); right: calc(var(--u) * -7); top: 50%; height: 1px; background: rgba(243, 234, 216, .32); }
.budget-bar i {
  position: absolute;
  left: calc(var(--u) * -7);
  top: 50%;
  height: 2px;
  width: calc(var(--used) * (100% + var(--u) * 14));
  margin-top: -1px;
  background: var(--tone);
  box-shadow: 0 0 calc(var(--u) * 10) var(--tone-glow);
  transition: width 700ms var(--ease), background 320ms var(--ease);
}
.budget-bar i::after {
  content: '';
  position: absolute;
  right: calc(var(--u) * -7);
  top: 50%;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  margin-top: calc(var(--u) * -7);
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .06), 0 0 calc(var(--u) * 16) calc(var(--u) * 3) var(--tone-glow);
}
.budget-line, .budget-reset { font-size: calc(var(--u) * 22); line-height: 1.4; color: var(--milk); }
.budget-reset { margin-top: calc(var(--u) * 2); }
body.reduced .budget, body.reduced .budget-bar i { transition: none; }

/* Werft screens on the TV: the free top right corner (the layer is 46 vw wide and starts at the left safe margin) */
#wish .budget, #summary .budget { position: absolute; top: 0; right: -44vw; width: min(calc(var(--u) * 720), 40vw); }
/* main menu: in the credits at the bottom right */
#credits .budget { width: min(calc(var(--u) * 560), 100%); }

/* phones: the budget is part of the column (the layer scrolls), the lines never smaller than 15 px */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  #wish .budget, #summary .budget { position: relative; top: auto; right: auto; width: auto; margin: 0 0 calc(var(--u) * 20); }
  #summary .budget { margin: calc(var(--u) * 14) 0 0; }
  .budget { padding: 10px 14px 12px 16px; }
  .budget-bar { margin-bottom: 8px; }
  .budget-line, .budget-reset { font-size: max(15px, calc(var(--u) * 22)); }
  #credits .budget { width: auto; }
}
/* a phone on its side has no room for it in the main menu (the Werft screens show the budget in their column) */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  #credits .budget { display: none; }
}