/* Styles only this game uses. The arcade's look lives in shared/arcade.css; the home, results and pause
   screens in shared/home.css. */

/* ---------- the home showcase: the inflation ladder ----------
   Six bills ($1 to $100) and, under them, the lane where Bitcoin glides along shooting each one (drawn on the
   canvas, which reaches up past the bills so the "+$" values can float above them). */
.fi-ladder { display: flex; flex-direction: column; align-items: center; }
.fi-lineup { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 3); padding-top: calc(var(--hu) * 2); }
.fi-cast { display: flex; gap: calc(var(--hu) * 6); }
.fi-cast img {
  width: calc(var(--hu) * 36);
  height: calc(var(--hu) * 24);
  image-rendering: pixelated;
  transition: transform 0.14s ease-out, opacity 0.14s ease-out;
  animation: fi-bob 1.4s ease-in-out infinite;
}
.fi-cast img:nth-child(2n) { animation-delay: -0.7s; }
.fi-cast img.popped { transform: scale(1.25); opacity: 0; transition-duration: 0.06s; }
.fi-cast img.back { animation: fi-back 0.3s ease-out; }
.fi-cast img.shake { animation: fi-shake 0.08s linear infinite; }
@keyframes fi-back { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fi-shake { 0% { transform: translateX(-6%) rotate(-3deg); } 50% { transform: translateX(6%) rotate(3deg); } 100% { transform: translateX(-6%) rotate(-3deg); } }
@keyframes fi-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--hu) * -1.2)); } }
.fi-lane { width: 100%; height: calc(var(--hu) * 24); }
.fi-lineup-cv {
  position: absolute;
  left: calc(var(--hu) * -7);
  top: calc(var(--hu) * -9);
  width: calc(100% + var(--hu) * 14);
  height: calc(100% + var(--hu) * 9);
  pointer-events: none;
}
.fi-cap { margin-top: calc(var(--hu) * 4) !important; font-size: calc(var(--hu) * 6); line-height: 1; color: #9aa3bf; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fi-cast img, .fi-cast img.shake { animation: none; } }

/* ---------- results: what you absorbed, and the money lesson ---------- */
.fi-absorbed { display: flex; align-items: center; justify-content: center; gap: calc(var(--hu) * 5); margin-bottom: calc(var(--hu) * 5) !important; color: #f4f6ff; }
.fi-absorbed img { width: calc(var(--hu) * 24); height: calc(var(--hu) * 16); image-rendering: pixelated; }
.fi-stats { color: #9aa3bf; }
.fi-stats .orange { color: var(--btc-orange); }
.fi-stats .fiat { color: #2fd24a; }
.fi-stats .red { color: #ff6b6b; }

/* ---------- the corner buttons ---------- */
/* Pause button (shown only while playing) sits just left of the mute button */
#btn-pause { right: calc(max(10px, env(safe-area-inset-right)) + 54px); }
#btn-pause[hidden] { display: none; }
/* "← ARCADE" (home screen only): back to the arcade's main page. Top-left corner, same blue
   neon style and height as the mute button in the top-right, so the two frame the game. */
#btn-arcade {
  right: auto;
  left: max(10px, env(safe-area-inset-left));
  width: auto;
  gap: 8px;
  padding: 0 12px 0 10px;
  font-family: var(--font-arcade);
  font-size: 10px;
  text-decoration: none;
}
#btn-arcade .px-arrow { width: 14px; height: 14px; shape-rendering: crispEdges; }
#btn-arcade[hidden] { display: none; }
/* Mute icon swap */
#btn-mute .icon-off { display: none; }
#btn-mute.muted .icon-on { display: none; }
#btn-mute.muted .icon-off { display: block; }

/* Screens shaped like the game (4:3 monitors, iPad landscape): start the game just below the
   corner buttons so they never cover the top bar (main.js decides when; other screens are unchanged). */
.app.icons-clear.on-board .stage-area { height: calc(100% - 50px); margin-top: 50px; }   /* (only under the game board: the home and results frame keeps its own top band clear) */

/* Steering from anywhere (v4.26): on a phone you can drag in the empty space under the game, so the whole screen
   must ignore pan and zoom gestures (taps on the buttons still work) */
.app { touch-action: none; }