/* 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: a live mempool ----------
   The board (and the meters' bars) are drawn on the canvas; FILL and HASH with their numbers are words on top. */
.tc-show { position: relative; height: calc(var(--hu) * var(--show-h)); }
.tc-show canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tc-meter {
  position: absolute;
  top: 0;
  width: calc(var(--hu) * 36);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hu) * 3.5);
  font-size: calc(var(--hu) * 7);
  line-height: 1;
  white-space: nowrap;
}
.tc-meter--fill { left: 0; }
.tc-meter--hash { right: 0; }
.tc-m-label { color: #8fb0ff; }
.tc-meter--fill .tc-m-val { color: #f4f6ff; }
.tc-meter--fill .tc-m-val.full { color: #ffc629; }
.tc-meter--hash .tc-m-val { color: #4fd8f0; }

/* ---------- results: your chain, the fee scale, four stats ---------- */
.tc-chain { display: block; margin: 0 auto; }
.tc-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hu) * 3.5);
  margin-top: calc(var(--hu) * 6) !important;
  font-size: calc(var(--hu) * 5.5);
  line-height: 1;
  color: #8d93b8;
}
.tc-fees { display: flex; gap: calc(var(--hu) * 1); }
.tc-fees i { display: block; width: calc(var(--hu) * 7); height: calc(var(--hu) * 5); }
.tc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--hu) * 7) calc(var(--hu) * 6);
  margin-top: calc(var(--hu) * 9);
  padding-left: calc(var(--hu) * 6);
  text-align: left;
}
.tc-stat { display: flex; align-items: center; gap: calc(var(--hu) * 5); min-width: 0; }
.tc-stat-ico { width: calc(var(--hu) * 9.5); height: calc(var(--hu) * 9.5); flex: none; }
.tc-stat-text { display: flex; flex-direction: column; gap: calc(var(--hu) * 3.5); min-width: 0; }
.tc-stat-label { font-size: calc(var(--hu) * 5.8); line-height: 1; color: #9aa3bf; white-space: nowrap; }
.tc-stat-value { font-size: calc(var(--hu) * 8); line-height: 1; color: #4fd8f0; white-space: nowrap; }
.tc-stat-value.gold { color: #ffc629; }

/* ---------- 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 BLOCK HEIGHT,
   MEMPOOL or the pause button. (The home and results use the whole screen, their top band kept clear for the buttons.) */
@media (max-width: 599px) {
  .app.tc-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;
    padding: 0 16px; 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.tc-board .stage-area { height: calc(100% - 50px); margin-top: 50px; }