/* The participant shell on a phone: thumb-reachable tabs, nothing hover-dependent.
   Every tap target is at least 44x44 CSS px — the smallest thing a thumb hits reliably. */
.tabbar-item {
  flex: 1 1 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem;
  color: #6c757d;
  font-weight: 500;
  text-decoration: none;
  border-top: 3px solid transparent;
}

.tabbar-item.active {
  color: #0d6efd;
  border-top-color: #0d6efd;
}

/* The dot is the only thing announcing "a game is running" from the other sections. */
.tabbar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #198754;
}

.tabbar-spacer { height: 72px; }

/* Photo captions and their edit field sit under the thumbnail; the input is finger-sized. */
.gallery-caption { font-size: .875rem; line-height: 1.3; word-break: break-word; }
.gallery-form .form-control, .gallery-form .btn { min-height: 44px; }

/* The gallery packs in COLUMNS, not rows: only your own photos carry a caption field and a
   delete button, so a row-based grid sizes every row to its tallest tile and leaves a
   ~340px hole next to a controls-free photo. Columns flow each tile under the previous one
   in the same column, so the height difference never becomes a hole. */
.gallery-grid { columns: 2; column-gap: 1rem; }
.gallery-item { break-inside: avoid; margin-bottom: 1rem; }
@media (min-width: 768px) { .gallery-grid { columns: 4; } }

/* Bootstrap's defaults for these three land at 4.26-4.45:1 on the participant surface
   (--bs-body-tertiary, #f8f9fa) — just under the 4.5:1 the WCAG AA text rule wants. Each
   is dropped to Bootstrap's own darker shade of the same hue. */
.link-secondary { --bs-secondary-rgb: 92, 99, 106; }        /* #5c636a — 5.78:1 */
.btn-outline-primary {                                       /* #0a58ca — 6.11:1 */
  --bs-btn-color: #0a58ca;
  --bs-btn-border-color: #0a58ca;
  --bs-btn-hover-bg: #0a58ca;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a58ca;
}
.btn-outline-danger {                                        /* #b02a37 — 6.16:1 */
  --bs-btn-color: #b02a37;
  --bs-btn-border-color: #b02a37;
  --bs-btn-hover-bg: #b02a37;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #b02a37;
}

/* Rezultatai / Istorija — read at arm's length, one-handed, in bad light. Rows are flex,
   never a table, so nothing can push the 360px viewport sideways; every colour pair below
   is >= 4.5:1 against both the card (#fff) and the page (#f8f9fa). */
.score-row, .history-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .5rem 0;
  border-bottom: 1px solid #dee2e6;
}
.score-row:last-child, .history-row:last-child { border-bottom: 0; }
.history-row { align-items: flex-start; }

/* The viewer's own row: found in a long list without reading a single name. */
/* Only the background marks "you". Padding the highlighted row alone shifted its content
   8px right of every neighbour (measured 37px vs 29px), leaving a ragged left edge — so the
   padding lives on the row itself and the modifier changes nothing but colour. */
.score-row, .history-row {
  padding-left: .5rem;
  padding-right: .5rem;
}
.score-row--you, .history-row--you {
  background: #e7f1ff;
  border-radius: .5rem;
  /* A filled row reads as a pill, so it needs air: two adjacent ones with no gap look like
     one block cracked by a hairline. The divider goes too — a rule drawn inside a filled
     shape is not a separator, it is a seam. */
  margin-block: .375rem;
  border-bottom-color: transparent;
}

.score-you {                                   /* #0a58ca on white — 6.11:1 */
  display: inline-block;
  background: #0a58ca;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  padding: .25rem .4rem;
  border-radius: .25rem;
  vertical-align: middle;
}

/* Place marker. Neutral by default; the podium three carry their own colour, which is what
   turns row 1 of a list into a first place. */
.score-place {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9ecef;
  color: #212529;
  font-weight: 700;
}
.score-place--1 { background: #856404; color: #fff; }   /* 5.49:1 */
.score-place--2 { background: #5c636a; color: #fff; }   /* 6.09:1 */
.score-place--3 { background: #7f4f24; color: #fff; }   /* 6.89:1 */

.score-row--top .score-place { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
.score-row--top { min-height: 64px; }
.score-total { font-size: 1.25rem; font-weight: 700; }
.score-row--top .score-total { font-size: 1.5rem; }

/* A festival award is signed — its sign is the first thing on the line. */
.history-points {
  flex-shrink: 0;
  min-width: 3rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.points-plus { color: #146c43; }               /* 6.11:1 on #f8f9fa */
.points-minus { color: #b02a37; }              /* 6.16:1 on #f8f9fa */

/* A video tile and its duration badge. position:relative on the item so the badge can sit
   on the poster; the grid is CSS columns, which does not create a containing block. */
.gallery-item { position: relative; }
.gallery-duration { position: absolute; right: .4rem; top: .4rem; font-size: .7rem; opacity: .85; }
/* Stand-in for a video the transcode queue has not finished: same footprint as a tile, so
   the masonry columns do not jump when it is replaced by the real poster. */
.gallery-placeholder { aspect-ratio: 4 / 3; background: var(--bs-secondary-bg); }