/* Results board for a TV or projector in the hall (screen.html, and the "Suur ekraan" button on the results page,
   which shows it full screen on the same page). Always fills the screen exactly, never scrolls; each class is one
   page (a long class is split into several) and pages change by themselves. */
@import url("fonts/fonts.css");

.tmboard {
  --bg: #0b130f; --band: #102018; --row: #14241c; --ink: #eef3ec; --slate: #93a59a; --rule: #263a2f;
  --gold: #ffd22e; --gold-ink: #2a2100; --silver: #c9d0d6; --bronze: #d79a62; --live: #4fd185;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif; --text: "Barlow Semi Condensed", "Segoe UI", sans-serif;
  /* the one column exactly as wide as the screen: an auto column grew with the longest name (608 px on a 390 px phone) */
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--text); font-variant-numeric: tabular-nums;
  color-scheme: dark; cursor: default;
}
.tmboard * { box-sizing: border-box; }
.tmboard [hidden] { display: none !important; }
.tmboard.idle { cursor: none; }

.tmboard header { position: relative; display: flex; align-items: center; gap: 2.2vw; padding: 1.6vh 2.4vw 1.4vh; background: var(--band); }
.tmboard header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5vh;
  background: linear-gradient(90deg, var(--gold) 0 25%, #e0353b 25% 50%, #1e9bd7 50% 75%, #f3f6ef 75% 100%); }
.tmboard header svg { width: 5vh; height: 5vh; flex: none; color: currentColor; }
.tmboard header img.logo { height: 6.4vh; width: auto; max-width: 24vw; object-fit: contain; flex: none; margin: -.6vh 0; }
.tmboard header.noband::after { content: none; }
.tmboard header.est::after { background: linear-gradient(90deg, #0072ce 0 33.34%, #000 33.34% 66.67%, #fff 66.67% 100%); }
.tmboard .name { font: 800 4.6vh/1 var(--display); letter-spacing: .005em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmboard .live { display: flex; align-items: center; gap: .6vw; font: 700 2.4vh/1 var(--display); color: var(--live); }
.tmboard .live::before { content: ""; width: 1.3vh; height: 1.3vh; border-radius: 50%; background: currentColor; animation: tmb-pulse 2s ease-out infinite; }
.tmboard .live.done { color: var(--slate); } .tmboard .live.done::before { animation: none; }
.tmboard .clock { font: 700 4vh/1 var(--display); }
@keyframes tmb-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 209, 133, .6); } 80%, 100% { box-shadow: 0 0 0 1.2vh transparent; } }

.tmboard .grouphead { position: relative; display: flex; align-items: baseline; gap: 1.6vw; padding: 2.2vh 2.4vw 1.2vh; overflow: hidden; }
.tmboard .grouphead::before { content: ""; position: absolute; right: -8vh; top: -20vh; width: 48vh; height: 48vh; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 3vh, rgba(255, 255, 255, .045) 3vh 3.3vh); }
.tmboard .gname { margin: 0; font: 800 6.2vh/1 var(--display); }
.tmboard .page { font: 600 2.6vh/1 var(--display); color: var(--slate); }

/* --rh = row height, --rf = what the row's text is sized by (the row height; on a phone held upright less, see board.js) */
.tmboard .board { padding: 0 2.4vw; min-height: 0; }
.tmboard .row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 1.4vw; height: var(--rh); padding: 0 1vw; border-radius: .6vh; }
.tmboard .row:nth-child(even) { background: var(--row); }
.tmboard .row.head { height: 4vh; color: var(--slate); font: 600 2vh/1 var(--text); background: transparent; }
.tmboard .row .n { text-align: right; }
.tmboard .rk { justify-self: center; display: grid; place-items: center; width: calc(var(--rf) * .72); height: calc(var(--rf) * .72); border-radius: 50%; font: 800 calc(var(--rf) * .42)/1 var(--display); }
.tmboard .rk.medalwrap { background: none; width: auto; height: auto; }
.tmboard .rk.rng { width: auto; height: auto; border-radius: 0; background: none; font-size: calc(var(--rf) * .3); white-space: nowrap; }   /* a place still open, "5–8" */
.tmboard .rk .medal { display: block; height: calc(var(--rf) * .92); width: auto; filter: drop-shadow(0 .3vh .5vh rgba(0, 0, 0, .45)); }
.tmboard.turn .row .rk .medal { animation: tmb-medal .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms + 260ms); }
@keyframes tmb-medal { from { transform: translateY(-1.2vh) rotate(-12deg); opacity: 0; } }
.tmboard .who { min-width: 0; }
.tmboard .who b { display: block; font: 600 calc(var(--rf) * .36)/1.1 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmboard .who small { display: block; color: var(--slate); font-size: calc(var(--rf) * .22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .3vh; }
.tmboard .plate { justify-self: start; padding: .2em .45em; border-radius: .25em; background: var(--ink); color: var(--bg); font: 800 calc(var(--rf) * .3)/1 var(--display); letter-spacing: .02em; }
.tmboard .rd { font: 600 calc(var(--rf) * .32)/1 var(--display); color: #c6d0d8; }
.tmboard .tot { font: 800 calc(var(--rf) * .52)/1 var(--display); }
.tmboard .dim { font: 500 calc(var(--rf) * .3)/1 var(--display); color: var(--slate); }
.tmboard .tot.flash { animation: tmb-flash 2.4s ease-out; }
@keyframes tmb-flash { 0% { color: var(--gold); text-shadow: 0 0 1.4vh rgba(255, 210, 46, .55); } 100% { color: var(--ink); text-shadow: none; } }
/* page change: the class name slides in, rows follow one after another (the one orchestrated moment) */
.tmboard.turn .gname { animation: tmb-gname .45s cubic-bezier(.2, .8, .2, 1) both; }
.tmboard.turn .row:not(.head) { animation: tmb-row .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
@keyframes tmb-gname { from { opacity: 0; transform: translateX(-3vw); } }
@keyframes tmb-row { from { opacity: 0; transform: translateY(1.6vh); } }
.tmboard .empty { display: grid; place-items: center; height: 100%; color: var(--slate); font: 600 3.4vh/1.3 var(--display); text-align: center; }

.tmboard footer { position: relative; display: flex; align-items: center; gap: 2vw; padding: 1.2vh 2.4vw 2vh; min-width: 0; }
/* the class tabs: the shown one is scrolled into the middle; when they do not fit, the edges fade instead of cutting */
.tmboard .groups { display: flex; gap: .6vw; flex: 1; min-width: 0; overflow: hidden; scroll-behavior: smooth; }
.tmboard .groups.over { -webkit-mask: linear-gradient(90deg, transparent, #000 3vw, #000 calc(100% - 5vw), transparent); mask: linear-gradient(90deg, transparent, #000 3vw, #000 calc(100% - 5vw), transparent); }
.tmboard .groups span { flex: none; font: 600 2.1vh/1 var(--display); color: var(--slate); padding: .7vh .9vw; border-radius: .5vh; white-space: nowrap; transition: background .4s, color .4s; }
.tmboard .groups span.on { background: var(--ink); color: var(--bg); }
.tmboard .url { flex: none; font: 500 1.9vh/1 var(--text); color: var(--slate); white-space: nowrap; }
/* time to the next page: one thin line across the whole bottom edge, filled by the compositor (smooth, never clipped) */
.tmboard .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .55vh; background: var(--rule); overflow: hidden; }
.tmboard .bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.tmboard .bar i.run { animation: tmb-fill var(--secs, 12s) linear forwards; }
@keyframes tmb-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tmboard .offline { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); background: #a65d00; color: #fff; padding: .8vh 1.4vw; border-radius: .6vh; font: 600 2vh/1 var(--text); z-index: 5; }
/* ---- duel bracket page (board.js drawBracket): fills the board, never scrolls; --mh = height of one match box ---- */
.tmboard .board.bk { padding: 0 2.4vw 1vh; }
.tmboard .bk-grid { --gap: 2.6vw; display: grid; grid-template-columns: repeat(var(--bcols), minmax(0, 1fr)); column-gap: var(--gap); height: 100%; }
.tmboard .bk-col { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tmboard .bk-h { font: 700 2.2vh/1 var(--display); color: var(--slate); letter-spacing: .03em; text-transform: uppercase; height: 4vh; flex: none; }
.tmboard .bk-slots { flex: 1; display: grid; min-height: 0; }
.tmboard .bk-slot { position: relative; display: flex; align-items: center; }
/* connectors: a pair of matches joins halfway to the next column, a line goes on to the match they feed */
.tmboard .bk-col:not(.last) .bk-slot::after { content: ""; position: absolute; right: calc(var(--gap) / -2); width: calc(var(--gap) / 2); border-right: .3vh solid var(--rule); }
.tmboard .bk-col:not(.last) .bk-slot.up::after { top: 50%; bottom: 0; border-top: .3vh solid var(--rule); }
.tmboard .bk-col:not(.last) .bk-slot.dn::after { top: 0; bottom: 50%; border-bottom: .3vh solid var(--rule); }
.tmboard .bk-col + .bk-col .bk-slot::before { content: ""; position: absolute; left: calc(var(--gap) / -2); width: calc(var(--gap) / 2); top: 50%; border-top: .3vh solid var(--rule); }
.tmboard .bk-m { position: relative; z-index: 1; width: 100%; height: var(--mh); display: grid; grid-template-rows: 1fr 1fr; background: var(--row); border: .2vh solid var(--rule); border-radius: .8vh; }
.tmboard .bk-m.ready { border-color: var(--slate); }
.tmboard .bk-m.going { border-color: var(--gold); box-shadow: 0 0 0 .3vh rgba(255, 210, 46, .35); }
.tmboard .bk-m.bye { opacity: .45; border-style: dashed; }
.tmboard .bk-m .mat { position: absolute; left: .6vw; bottom: 100%; margin-bottom: .3vh; font: 600 calc(var(--mh) * .15)/1 var(--display); color: var(--gold); white-space: nowrap; }
.tmboard .bk-r { display: grid; grid-template-columns: calc(var(--mh) * .38) minmax(0, 1fr) auto calc(var(--mh) * .5); align-items: center; column-gap: .6vw; padding: 0 .6vw 0 0; min-width: 0; }
.tmboard .bk-r + .bk-r { border-top: .15vh solid var(--rule); }
.tmboard .bk-r .sd { text-align: right; font: 600 calc(var(--mh) * .17)/1 var(--display); color: var(--slate); }
.tmboard .bk-r .nm { display: flex; align-items: baseline; gap: .5vw; min-width: 0; }
.tmboard .bk-r .nm b { font: 600 calc(var(--mh) * .22)/1.1 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tmboard .bk-r .nm small { flex: none; font: 600 calc(var(--mh) * .15)/1 var(--display); color: var(--slate); }
.tmboard .bk-r .nm i { font-style: normal; color: var(--slate); font: 600 calc(var(--mh) * .17)/1 var(--display); }
.tmboard .bk-r .ends { font: 500 calc(var(--mh) * .16)/1 var(--display); color: #c6d0d8; white-space: nowrap; }
.tmboard .bk-r .ends em { font-style: normal; color: var(--gold); }
.tmboard .bk-r .pts { justify-self: stretch; align-self: stretch; display: grid; place-items: center; font: 800 calc(var(--mh) * .3)/1 var(--display); border-left: .15vh solid var(--rule); }
.tmboard .bk-r.win { background: linear-gradient(90deg, rgba(255, 210, 46, .16), transparent 70%); }
.tmboard .bk-r.win .nm b { font-weight: 700; }
.tmboard .bk-r.win .pts { color: var(--gold); }
.tmboard .bk-r.lose { opacity: .62; }
/* last column: medal places at the top, the final in the middle, the bronze match at the foot */
.tmboard .bk-pod { position: absolute; left: 0; right: 0; top: 5vh; display: grid; gap: .8vh; }
.tmboard .bk-pod div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8vw; }
.tmboard .bk-pod .medal { height: 5vh; width: auto; }
.tmboard .bk-pod b { font: 700 2.6vh/1.1 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmboard .bk-pod .m1 b { font-size: 3.1vh; color: var(--gold); }
.tmboard .bk-pod small { font: 600 2vh/1 var(--display); color: var(--slate); }
.tmboard .bk-bronze { position: absolute; left: 0; right: 0; bottom: 0; }
.tmboard .bk-bronze .bk-h { height: auto; margin-bottom: 2.4vh; color: var(--bronze); }
.tmboard.turn .bk-m { animation: tmb-row .42s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- a phone or other narrow screen (board.js isNarrow, same 700 px line): text sized by the width where the height
   would make it too wide, brackets as a list of the stages still being shot (.bkn) ---- */
.tmboard .bk-list { display: flex; flex-direction: column; gap: calc(var(--mh) * .3); height: 100%; overflow: hidden; }
.tmboard .bkn .bk-h { height: auto; margin-top: .6vh; }
.tmboard .bkn .bk-m { flex: none; }
.tmboard .bk-podn .bk-pod { position: static; }
/* the shooting timer's light (light.js) in the header; complete here, screen.html has no tm.css */
.tmboard .tl { flex: none; }
.tmboard .tlight { display: flex; align-items: center; gap: 1.1vw; padding: .5vh .9vw; border: 0; border-radius: 1vh; background: rgba(0, 0, 0, .3); color: inherit;
  font: 700 2.6vh/1 var(--display); letter-spacing: .02em; }
.tmboard .tl-dots { display: inline-flex; gap: .6vh; padding: .55vh .75vh; border-radius: 999px; background: #1f1f1f; }
.tmboard .tl-dots i { width: 2.6vh; height: 2.6vh; border-radius: 50%; background: #3b3b3b; }
.tmboard .tl-dots i.r.on { background: #ff3b30; box-shadow: 0 0 1.2vh #ff3b30; }
.tmboard .tl-dots i.y.on { background: #ffcc00; box-shadow: 0 0 1.2vh #ffcc00; }
.tmboard .tl-dots i.g.on { background: #34c759; box-shadow: 0 0 1.2vh #34c759; }
.tmboard .tlight.flash .tl-dots i.r.on { animation: tmb-blink 1s step-end infinite; }
@keyframes tmb-blink { 50% { background: #3b3b3b; box-shadow: none; } }
.tmboard .tl-secs { min-width: 2ch; font-size: 4.6vh; text-align: right; }
.tmboard .tl-word { color: inherit; opacity: .75; }
.tmboard .tl-end { margin-left: 0; }
.tmboard .tlight.flash .tl-word { color: #ff6b62; opacity: 1; }
.tmboard .tl-shift { display: inline-flex; align-items: center; gap: .5vh; }
.tmboard .tl-shift small { margin-right: .3vh; font-size: 1.8vh; opacity: .75; }
.tmboard .tl-shift em { padding: .35vh .7vh; border: 1px solid currentColor; border-radius: .6vh; font-style: normal; opacity: .55; }
.tmboard .tl-shift em.on { border-color: var(--gold); background: var(--gold); color: #1f1f1f; opacity: 1; }
.tmboard .tlight.stale { opacity: .6; }
@media (max-width: 699px) {
  .tmboard .tlight { font-size: min(2.6vh, 3.6vw); }
  .tmboard .tl-dots i { width: min(2.6vh, 3.4vw); height: min(2.6vh, 3.4vw); }
  .tmboard .tl-secs { font-size: min(4.6vh, 5.6vw); }
  .tmboard .tl-word, .tmboard .tl-end, .tmboard .tl-shift small, .tmboard header:has(.tl:not([hidden])) .live { display: none; }
  .tmboard header svg { width: min(5vh, 8vw); height: min(5vh, 8vw); }
  .tmboard header img.logo { height: min(6.4vh, 10vw); }
  .tmboard .name { font-size: min(4.6vh, 6.2vw); }
  .tmboard .live { font-size: min(2.4vh, 3.8vw); }
  .tmboard .clock { font-size: min(4vh, 5.6vw); }
  .tmboard .gname { font-size: min(6.2vh, 8.6vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tmboard .page { flex: none; font-size: min(2.6vh, 4vw); }
  .tmboard .row.head { font-size: min(2vh, 3.6vw); }
  .tmboard .groups span { font-size: min(2.1vh, 3.8vw); padding: .7vh 2vw; }
  .tmboard .url { display: none; }
  .tmboard .bk-h { font-size: min(2.2vh, 3.8vw); }
  .tmboard .bk-pod b { font-size: min(2.6vh, 4.4vw); }
  .tmboard .bk-pod .m1 b { font-size: min(3.1vh, 5vw); }
  .tmboard .bk-pod small { font-size: min(2vh, 3.6vw); }
}

@media (prefers-reduced-motion: reduce) { .tmboard *, .tmboard *::before { animation: none !important; transition: none !important; } }