/* Styles only this game uses. The arcade's look lives in shared/arcade.css; the home, results and pause
   screens in shared/home.css (sizes there and here are in --hu: one logical px of the 288-wide frame). */

/* ---------- the home showcase: the animal ranks ----------
   4 x 2: each animal with its name and the BTC it needs. The best you've reached is lit green, the ones
   still ahead are dimmed. The animals get bigger when the frame has room for it: where the corner buttons
   sit clear of the frame (phones, computers) and on taller phones (--fh is the frame's height). */
.ss-ranks {
  --k: 1.1;            /* the animals' size (x their 18 x 14 pixels) */
  --g: 2;              /* the room inside and between the cells */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--hu) * var(--g)) calc(var(--hu) * 4);
}
.ah-clear .ss-ranks { --k: clamp(1.75, 1.75 + (var(--fh) - 512) / 110, 2.5); --g: 2.75; }
.ss-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hu) * var(--g));
  padding: calc(var(--hu) * (var(--g) - 1)) 0 calc(var(--hu) * (var(--g) - 0.5));
  border-radius: calc(var(--hu) * 4);
}
.ss-rank img {
  width: calc(var(--hu) * 18 * var(--k));
  height: calc(var(--hu) * 14 * var(--k));
  image-rendering: pixelated;
  animation: ss-bob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.3s);      /* a slow wave along the chart */
}
.ss-rank-name { font-size: calc(var(--hu) * 6); line-height: 1; color: #f4f6ff; white-space: nowrap; }
.ss-rank-min { font-size: calc(var(--hu) * 5.5); line-height: 1; color: #ffc629; white-space: nowrap; }
.ss-rank.locked img, .ss-rank.locked span { opacity: 0.38; }
.ss-rank.best {
  background: rgba(47, 210, 74, 0.1);
  box-shadow: inset 0 0 0 max(1px, calc(var(--hu) * 1)) rgba(47, 210, 74, 0.75), 0 0 calc(var(--hu) * 7) rgba(47, 210, 74, 0.3);
}
.ss-rank.best .ss-rank-name, .ss-rank.best .ss-rank-min { color: #2fd24a; }
@keyframes ss-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--hu) * -1.5)); } }

/* ---------- results: the rank you reached, and the run in four numbers ---------- */
.ss-over-rank { display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 5); margin-bottom: calc(var(--hu) * 8); line-height: 1; }
.ss-over-animal { position: relative; display: block; }
.ss-over-animal img { display: block; width: calc(var(--hu) * 54); height: calc(var(--hu) * 42); image-rendering: pixelated; animation: ss-bob 1.4s ease-in-out infinite; }
.ss-new {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: calc(var(--hu) * 5);
  font-weight: 400;
  font-size: calc(var(--hu) * 6);
  color: #ffc629;
  white-space: nowrap;
  animation: ss-blink 0.8s steps(2, start) infinite;
}
@keyframes ss-blink { to { visibility: hidden; } }
.ss-over-name { font-size: calc(var(--hu) * 8.5); color: #2fd24a; text-shadow: 0 0 calc(var(--hu) * 4) rgba(47, 210, 74, 0.55); white-space: nowrap; }
.ss-over-next { font-size: calc(var(--hu) * 6); color: #9aa3bf; white-space: nowrap; }
.ss-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--hu) * 4) calc(var(--hu) * 5); line-height: 1; }
.ss-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hu) * 4);
  padding: calc(var(--hu) * 5) 0;
  border: max(1px, calc(var(--hu) * 1)) solid #1f46d8;
  border-radius: calc(var(--hu) * 4);
  background: rgba(4, 8, 30, 0.6);
}
.ss-stat span { font-size: calc(var(--hu) * 6); color: #c9d2ff; white-space: nowrap; }
.ss-stat b { font-weight: 400; font-size: calc(var(--hu) * 9); color: #f7931a; white-space: nowrap; }
.ss-stat b.gold { color: #ffc629; }

@media (prefers-reduced-motion: reduce) {
  .ss-rank img, .ss-over-animal img, .ss-new { animation: none; }
}

/* ---------- the corner buttons ---------- */
/* Pause (during a game) sits just left of the sound button, like every game in the arcade */
#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; }

/* Phones, while the board shows: the game sits just below the corner buttons, so they never cover BTC MINED.
   (The home and results use the whole screen, their top band kept clear for the buttons, like the other games.) */
@media (max-width: 599px) {
  .app.ss-board { padding-top: calc(max(10px, env(safe-area-inset-top)) + 54px); }
}

/* Phone held sideways: cover the game with a "turn your phone" message (the game pauses itself) */
.rotate-msg { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-msg {
    display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; text-align: center;
    background: #05070f; color: var(--btc-orange); font-family: var(--font-arcade); font-size: 16px; line-height: 1.8;
  }
}

/* the way back to the arcade stays on the "turn your phone" screen (same button as the home's top-left corner) */
.rotate-msg p { margin: 0; }
.rotate-msg .rotate-arcade {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: auto;
  width: auto; gap: 8px; padding: 0 12px 0 10px; font-family: var(--font-arcade); font-size: 10px; line-height: 1; text-decoration: none;
}
.rotate-msg .rotate-arcade .px-arrow { width: 14px; height: 14px; shape-rendering: crispEdges; }
/* bigger screens shaped like the game (an iPad held upright): the board starts below the corner buttons (main.js decides) */
.app.icons-clear.ss-board .stage-area { height: calc(100% - 50px); margin-top: 50px; }