/* Styles only this game uses. Shared look lives in shared/arcade.css. */

.cast {
  display: flex;
  gap: calc(var(--u) * 3.5);
  justify-content: center;
  flex-wrap: wrap;
  margin: calc(var(--u) * 1) 0;
}

.cast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  font-size: calc(var(--u) * 1.6);
}

.cast-item img,
.eaten-item img {
  height: calc(var(--u) * 5.5);
  width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cast-pts { color: var(--text); }

/* Runway between the title and the line-up: a small Bitcoin chomps a row of sats (drawn by screens.js).
   Width is set in screens.js to 90% of the line-up's width. Negative margins keep the added height small.
   The canvas is positioned by screens.js to extend past the runway so Bitcoin is never clipped. */
.runway {
  position: relative;
  height: calc(var(--u) * 7.2);
  margin-block: calc(var(--u) * -1.1);
  flex: none;
}

#start-runway canvas {
  position: absolute;
  pointer-events: none;
}

.big { font-size: 1.4em; }

.new-best {
  color: var(--btc-orange) !important;
  animation: arcade-blink 0.6s steps(2, start) infinite;
}

.eaten {
  display: flex;
  gap: calc(var(--u) * 2.5);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: calc(var(--u) * 1.7);
}

.eaten-item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
}

.eaten-item img { height: calc(var(--u) * 3.6); }

.sat-dot {
  display: inline-block;
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  background: #ffebc2;
  box-shadow: 0 0 calc(var(--u) * 0.8) rgba(255, 235, 194, 0.8);
}

.quip { font-style: normal; max-width: 90%; }

/* Small secondary orange button (results "← HOME", pause "RESTART").
   Same orange pixel-button style as PLAY AGAIN / RESUME, just smaller. */
.btn.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
  min-width: calc(var(--u) * 15);
  min-height: 32px;
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  font-size: calc(var(--u) * 1.5);
  box-shadow: 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow), 0 calc(var(--u) * 0.4) 0 #8a4700;
}

.btn.btn-small:active {
  transform: translateY(calc(var(--u) * 0.3));
  box-shadow: 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow), 0 calc(var(--u) * 0.1) 0 #8a4700;
}

.btn-small .px-arrow {
  width: 1em;
  height: 1em;
  shape-rendering: crispEdges;
}

/* A primary button with its small secondary button underneath (RESUME/RESTART, PLAY AGAIN/HOME).
   The gap always clears the primary button's drop shadow or keyboard-focus ring (whichever is
   bigger), plus a small visible space that scales with the game but never drops below 6px. */
.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(max(var(--u) * 0.6, 7px) + max(6px, var(--u) * 0.8));
}

/* Two small buttons side by side (results: HOME + SHARE) */
.btn-row {
  display: flex;
  justify-content: center;
  gap: max(8px, calc(var(--u) * 1.5));
}

/* Pause menu: compact centered panel */
.pause-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: rgba(0, 0, 0, 0.88);
  border: 2px solid var(--neon-blue);
  border-radius: calc(var(--u) * 0.8);
  box-shadow: 0 0 calc(var(--u) * 2) var(--neon-blue-glow);
}

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

/* Home screen: one rotating how-to-play tip under the controls hint (always a single line) */
.tip {
  margin-top: calc(var(--u) * 0.2);
  font-size: calc(var(--u) * 1.8);
  color: #ffc063;
  text-shadow: 0 0 calc(var(--u) * 0.7) rgba(247, 147, 26, 0.55);
  white-space: nowrap;
}
/* Safari fix: Safari (Mac + every iPhone browser) left pieces of the previous tip on screen,
   because the line changed width with every tip and its glow/cursor drew outside its edges.
   The line is now one fixed full-width strip (text still centered, so nothing moves) with room
   above/below for the glow; the extra padding is cancelled by equal negative margins, so the
   layout and every pixel are unchanged. Each tip change now repaints the whole strip. */
.tip {
  align-self: stretch;
  padding-block: 0.3em;
  margin-top: calc(var(--u) * 0.2 - 0.3em);
  margin-bottom: -0.3em;
  height: 2.3em; /* always one line tall (1.7em + padding), so the Home screen never moves between tips */
}
.tip-line { transition: opacity 0.25s ease; }
.tip-line.fading { opacity: 0; }
.tip-rest { visibility: hidden; }
/* Vertical centering: every icon/cursor sits on the letters' visual middle, for every tip.
   --tip-mid = height of the middle of the letters above the text baseline. In the arcade font
   (Press Start 2P) capitals run from 0.125em to 1em above the baseline, so their middle is 0.5625em.
   Each decoration is raised by (--tip-mid − half its own height), so its center lands exactly there. */
.tip { --tip-mid: 0.5625em; }
.tip-icon {
  display: inline-block;
  height: 1.25em;
  width: auto;
  margin-right: 0.7em;
  vertical-align: calc(var(--tip-mid) - 1.25em / 2);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tip-sat {
  width: 0.7em;
  height: 0.7em;
  vertical-align: calc(var(--tip-mid) - 0.7em / 2);
  margin-left: 0.3em;
  background: #ffebc2;
  box-shadow: 0 0 0.5em rgba(255, 235, 194, 0.8);
}
.tip-badge {
  height: auto;
  font-size: 0.75em;
  /* same total padding as before, split so the "x2" sits in the middle of the tag;
     the tag keeps its own text on the shared baseline, then lifts by the difference in letter middles */
  padding: 0.3125em 0.3em 0.1875em;
  vertical-align: calc(0.5625em / 0.75 - 0.5625em);
  color: #000;
  background: var(--btc-orange);
  border-radius: 0.2em;
  text-shadow: none;
}
/* Blinking block cursor. It takes up no space, so nothing shifts while the tip types out. */
.tip-cursor {
  display: inline-block;
  width: 0.6em;
  height: 0.9em;
  margin-right: -0.6em;
  vertical-align: calc(var(--tip-mid) - 0.9em / 2);
  background: currentColor;
  animation: arcade-blink 0.8s steps(2, start) infinite;
}
@media (prefers-reduced-motion: reduce) { .tip-line { transition: none; } .tip-cursor { display: none; } }

/* Pause menu HOME: same visible gap below RESTART as RESTART has below RESUME. RESUME's dark
   drop-shadow is 0.6u and RESTART's is 0.4u, so HOME sits 0.2u higher to even out what you see.
   The same 0.2u is added below it, so the panel keeps its height and RESUME/RESTART don't move. */
#btn-pause-home { margin-top: calc(var(--u) * -0.2); margin-bottom: calc(var(--u) * 0.2); }

/* Mute icon swap */
#btn-mute .icon-off { display: none; }
#btn-mute.muted .icon-on { display: none; }
#btn-mute.muted .icon-off { display: block; }