/* ==========================================================================
   Balconies — styles. Theme tokens and shared components come from
   shared/style.css.

   One screen matters: the building, drawn on a canvas (render.js), as tall as
   the phone allows. The whole building is the control: hold anywhere on it.
   ========================================================================== */

.bc { display: grid; gap: .6rem; max-width: 30rem; margin-inline: auto; padding-block: .5rem 2rem; }
.bc-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.bc-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bc-top > :last-child:not(:first-child) { margin-inline-start: auto; }
.bc-note { font-size: 1.05rem; font-weight: 700; text-align: center; }
.bc-small { font-size: .85rem; font-weight: 700; }
.bc-center { text-align: center; }
.bc-center-btn { justify-self: center; }

/* ---------- Menu ---------- */

.bc-menu { display: grid; gap: .7rem; }
.bc-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.bc-best { font-weight: 900; text-align: center; }
.howto { max-width: 30rem; margin: 1.5rem auto 0; padding: .25rem 1rem; }
.howto summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.howto ol { display: grid; gap: .5rem; padding: 0 0 1rem; padding-inline-start: 1.4rem; list-style: decimal; }

/* ---------- Playing ---------- */

.bc-run { display: grid; gap: .45rem; }
.bc-hud { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-weight: 800; }
.bc-hud__basket { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.bc-hud__hearts { font-size: 1.05rem; letter-spacing: .05em; }
.bc-hud__wind { margin-inline-start: auto; font-size: .85rem; font-weight: 900; white-space: nowrap; direction: ltr; transition: opacity .3s; }
.bc-patience { height: 8px; }

.bc-stage {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 16px 18px 15px 19px;
  box-shadow: 4px 4px 0 var(--line);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.bc-stage:focus-visible { outline-offset: 2px; }
.bc-canvas {
  display: block;
  width: 100%;
  /* As tall as the phone allows, under the header and the hud. */
  height: clamp(320px, calc(100vh - 13rem), 160vw);
  height: clamp(320px, calc(100dvh - 13rem), 160vw);
  max-height: 46rem;
}
.bc-hint {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: .35rem 1rem .45rem;
  font-size: .95rem;
  font-weight: 900;
  text-align: center;
  color: #fff;
  background: rgb(12 11 16 / .62);
  pointer-events: none;
  transition: background .15s;
}
.bc-stage.is-holding .bc-hint { background: rgb(95 112 35 / .85); }

/* The others, while everyone plays the same building. */
.bc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.bc-chip { display: flex; align-items: center; gap: .3rem; padding: .1rem .5rem; font-size: .78rem; font-weight: 800; line-height: 1.3; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; }
.bc-chip.is-you { border-color: var(--tomato); }
.bc-chip.is-done { opacity: .55; }
.bc-chip__face { font-size: 1rem; }
.bc-chip__name { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-chip__score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-chip__hearts { font-size: .55rem; white-space: nowrap; }
/* Racing: the others take a line above the building, so the building is a little shorter. */
.bc-run--race .bc-canvas { height: clamp(300px, calc(100vh - 15.5rem), 160vw); height: clamp(300px, calc(100dvh - 15.5rem), 160vw); }

/* ---------- Game over, alone ---------- */

.bc-over { display: grid; gap: .7rem; padding: 1rem; }
.bc-bigscore { font-size: clamp(2.6rem, 14vw, 3.6rem); font-weight: 900; line-height: 1; text-align: center; }
.bc-newbest { padding: .4rem .9rem; font-weight: 900; text-align: center; color: #fff; background: var(--olive); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }

/* ---------- Online result ---------- */

.bc-board { display: grid; gap: .4rem; }
.bc-board__row { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); padding: .5rem .8rem; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.bc-board__row.is-winner { color: var(--ink); background: var(--sun); }
.bc-board__row.is-you { border-width: 4px; }
.bc-board__place { min-width: 1.4rem; font-size: 1.4rem; font-weight: 900; text-align: center; }
.bc-board__face { font-size: 1.6rem; line-height: 1; }
.bc-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.bc-board__who small { font-weight: 700; }
.bc-board__wins { font-size: .85rem; font-weight: 900; white-space: nowrap; }
.bc-board__score { font-size: 1.3rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }