/* Pixel skin: fixed palette, hard edges, notched pixel borders, stepped motion.
   --u is one art pixel in CSS px (set by setupPixelCss so it lands on whole device pixels). */
@font-face { font-family: "Fuzzpix"; src: url("fuzzpix.woff") format("woff"); font-display: block; }
:root {
  --u: 3px;
  --ink: #f2f0e4; --ink-soft: #9aa6c4;
  --bg: #161a2b; --panel: #252d4a; --panel-2: #3c4a73; --line: #161a2b;
  --accent: #ffd447; --accent-ink: #161a2b; --good: #4fbf5b; --bad: #d9455f; --gold: #ffd447;
  --radius: 0px; --bw: var(--u); --gap: 11px;
  --font: "Fuzzpix", ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: 10px; --fs-sm: 13.4px; --fs-md: 16.7px; --fs-lg: 20px; --fs-xl: 30px;
  /* notched border: four shadows leave the corners empty */
  --edge: 0 calc(var(--u) * -1) 0 0 var(--line), 0 var(--u) 0 0 var(--line), calc(var(--u) * -1) 0 0 0 var(--line), var(--u) 0 0 0 var(--line);
  --bevel: inset 0 var(--u) 0 0 rgba(255, 255, 255, .28), inset 0 calc(var(--u) * -1) 0 0 rgba(0, 0, 0, .28);
}
html, body { font-weight: normal; font-synthesis: none; -webkit-font-smoothing: none; line-height: 1.3; background: var(--bg); }
h1, h2, h3, b, strong { font-weight: normal; }
.spr { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }

.hud { background: var(--panel); box-shadow: 0 var(--u) 0 0 var(--line); position: relative; z-index: 2; }
.hud-coin, .hud-coin .spr { width: 32px; height: 32px; }
.hud-amount { color: var(--accent); text-shadow: var(--u) var(--u) 0 var(--line); }
.hud-rate { color: var(--ink); opacity: .85; margin-top: 5px; }
.chip { background: var(--bg); box-shadow: var(--edge); min-height: 28px; margin: 0 var(--u); }
.chip .spr { width: 16px; height: 16px; }
.icon-btn { width: 44px; height: 44px; background: var(--panel-2); box-shadow: var(--edge), var(--bevel); margin: 0 var(--u); }
.icon-btn .spr { width: 32px; height: 32px; }
.icon-btn:active { transform: translateY(var(--u)); box-shadow: var(--edge); }

.stage { background: #2b8a57; }
.panel { background: var(--bg); box-shadow: inset 0 var(--u) 0 0 var(--line); }
.page { padding: 12px 12px 18px; }
.section h2 { color: var(--accent); }

.tabs { background: var(--panel); box-shadow: 0 calc(var(--u) * -1) 0 0 var(--line); position: relative; z-index: 2; }
.tab { color: var(--ink-soft); }
.tab .spr { width: 32px; height: 32px; opacity: .6; }
.tab.active { color: var(--accent); background: var(--bg); box-shadow: inset 0 var(--u) 0 0 var(--accent); }
.tab.active .spr { opacity: 1; animation: hop .3s steps(2); }
@keyframes hop { 50% { transform: translateY(calc(var(--u) * -1)); } }
.tab-badge { box-shadow: var(--edge); width: 6px; height: 6px; top: 8px; left: calc(50% + 14px); }

.row { background: var(--panel); box-shadow: var(--edge), inset 0 var(--u) 0 0 rgba(255, 255, 255, .08); padding: 9px; }
.row.pop { animation: flash .18s steps(2); }
@keyframes flash { 50% { background: var(--panel-2); } }
.row-icon { background: var(--bg); box-shadow: var(--edge); }
.row-count { background: var(--accent); color: var(--accent-ink); box-shadow: var(--edge); right: -4px; bottom: -4px; min-width: 20px; }
.row-title { color: var(--ink); }

.btn { background: var(--good); color: var(--line); box-shadow: var(--edge), var(--bevel); margin: var(--u); min-height: 44px; }
.btn:active { transform: translateY(var(--u)); box-shadow: var(--edge), inset 0 var(--u) 0 0 rgba(0, 0, 0, .28); }
.btn.off { background: var(--panel-2); color: var(--ink-soft); box-shadow: var(--edge); }
.btn.off .spr { opacity: .55; }
.btn.primary, .btn.gold { background: var(--accent); }
.btn.danger { background: var(--bad); color: var(--ink); }
.btn.ghost { background: var(--panel-2); color: var(--ink); }
.btn.wide { width: calc(100% - var(--u) * 2); }

.bar { height: calc(var(--u) * 3); background: var(--bg); box-shadow: var(--edge); margin-left: var(--u); margin-right: var(--u); }
.bar > i { background: var(--good); box-shadow: inset 0 var(--u) 0 0 rgba(255, 255, 255, .3); }

.seg { background: var(--panel); box-shadow: var(--edge); margin: var(--u); }
.seg button { color: var(--ink-soft); }
.seg button.active { background: var(--accent); color: var(--accent-ink); }

.card { background: var(--panel); box-shadow: var(--edge), inset 0 var(--u) 0 0 rgba(255, 255, 255, .08); margin: var(--u); }
.card.hero { background: #3a2f5c; }
.card h3 { color: var(--accent); }

.modal-layer { background: rgba(10, 12, 24, .78); }
.modal { background: var(--panel); box-shadow: var(--edge), 0 0 0 var(--u) var(--line), inset 0 var(--u) 0 0 rgba(255, 255, 255, .1); animation: drop .2s steps(4); }
@keyframes drop { from { transform: translateY(-24px); opacity: 0; } }
.modal-title { color: var(--accent); }
.modal-big { color: var(--accent); text-shadow: var(--u) var(--u) 0 var(--line); }
.modal-big .spr { width: 32px; height: 32px; }
.modal textarea { background: var(--bg); color: var(--ink); border: 0; box-shadow: var(--edge); margin: var(--u); width: calc(100% - var(--u) * 2); }
.toast { background: var(--accent); color: var(--accent-ink); box-shadow: var(--edge); animation: toast-in .15s steps(3); }
.toast .spr { width: 16px; height: 16px; }

.pill { background: var(--line); color: var(--ink); box-shadow: 0 0 0 var(--u) var(--line), inset 0 0 0 var(--u) var(--panel-2); min-height: 26px; padding: 4px 9px; }
.pill .spr { width: 16px; height: 16px; }
.pill.hot { color: var(--accent); box-shadow: 0 0 0 var(--u) var(--line), inset 0 0 0 var(--u) var(--accent); }
.meter { background: var(--line); box-shadow: var(--edge); height: 24px; }
.meter > i { background: var(--bad); box-shadow: inset 0 var(--u) 0 0 rgba(255, 255, 255, .3); }
.meter > span { color: var(--ink); font-size: var(--fs-sm); }
.banner { color: var(--accent); text-shadow: var(--u) var(--u) 0 var(--line), calc(var(--u) * -1) 0 0 var(--line), 0 calc(var(--u) * -1) 0 var(--line); animation: banner-in .25s steps(4); }
.stage-btn { background: var(--accent); color: var(--accent-ink); box-shadow: var(--edge), var(--bevel); }
.stage-btn:active { transform: translateY(var(--u)); }

@media (min-width: 820px) and (min-height: 500px) {
  .hud { box-shadow: var(--edge); }
  .stage { box-shadow: var(--edge); }
  .panel { box-shadow: var(--edge); }
  .tabs { box-shadow: var(--edge); align-self: end; }
  .app { column-gap: 18px; row-gap: 10px; }
}