/* ČEZ VR leaderboard - design 6a.
   One responsive page: the phone layout below 640px, the spectator/desktop layout above.
   The desktop side is a straight port of the 6a export: cream masthead over an orange rule,
   a dark toolbar carrying scope/search/language, then the board floating on a blurred world. */

@font-face{font-family:Poppins;src:url("../fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("../fonts/Baloo2-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}

:root{
  --orange:#F24F00; --orange-dark:#C33C00; --charcoal:#393939; --cream:#FFF8F0;
  --ink:#5c5c5c; --muted:#7a7a7a; --label:#6e6e6e; --amber:#F5A623;
  --gold:#FFD24A; --gold-ink:#7A4C00; --silver:#DFE1E4; --silver-ink:#6b6b6b;
  --bronze:#E8CDB5; --bronze-ink:#8A5A2B; --track:#F1EDE7;
  --green:#8BE05C; --peach:#FFB07A;
  /* Cards are translucent so the blurred world reads through them. */
  --card:rgba(255,255,255,.94);
  /* The board has no borders in 6a, but admin.html and admin_login.html load this file for
     its palette and outline every input, button and table row with --edge. Dropping it left
     those declarations invalid, so the login form's two fields rendered as white-on-white. */
  --edge:rgba(57,57,57,.10);
  /* A row the search has matched. */
  --hit:#FFEFE7; --hit-edge:#F9C4A9; --hit-track:#F7DCCB; --hit-time:#b58a72;
  --on-dark:rgba(255,255,255,.12); --on-dark-ink:rgba(255,255,255,.82);
}

*{box-sizing:border-box}
/* Several elements JS toggles with the `hidden` attribute (#more, #pager, #empty) carry a
   class that sets `display`, and a class outranks the UA's `[hidden]{display:none}`. Without
   this they stay on screen however often the script sets the attribute. */
[hidden]{display:none!important}
body{margin:0;background:var(--cream);color:var(--charcoal);
     font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
     -webkit-font-smoothing:antialiased}

/* The game world, blurred, behind everything. The masthead and toolbar paint over it; only
   the board lets it through. Fixed so scrolling a long list does not repaint the blur, and
   overscanned past the viewport because `filter:blur` fades out at the element's edges.
   6a blurred a render that was already soft; world.jpg is the sharp one, so it needs a much
   heavier blur and a little less saturation to land on the same washed-out field. */
body::before{
  content:"";position:fixed;inset:-60px;z-index:-2;
  background:url("../img/world.jpg") center/cover no-repeat;
  filter:blur(30px) saturate(.9);
}
/* 6a veiled the world in cream, which washed it out. Charcoal instead: the world keeps its
   colour and the cards, still near-opaque white, separate from it far more cleanly. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;background:rgba(57,57,57,.22);
}
h1,h2,.display{font-family:"Baloo 2",Poppins,cursive;font-weight:800;margin:0}
.num{font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
.masthead{position:relative;background:var(--cream);border-bottom:5px solid var(--orange)}
.masthead__brand{display:flex;align-items:center;gap:14px}
.logo{display:block;width:38px;height:38px;object-fit:contain}
.eyebrow{font:600 11px Poppins,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-dark)}
.masthead h1{color:var(--charcoal);line-height:1}

/* ---------- toolbar ---------- */
.toolbar{position:relative;background:var(--charcoal);display:flex;align-items:center;gap:10px}
.tabs{display:flex;gap:8px;flex:1}
.tabs button{flex:1;border:0;background:var(--on-dark);border-radius:12px;
  font:600 14px Poppins,sans-serif;color:var(--on-dark-ink);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--orange);color:#fff;font-weight:700}
.search{background:var(--on-dark);border:0;border-radius:12px;
  font:500 14px Poppins,sans-serif;color:#fff}
.search::placeholder{color:rgba(255,255,255,.6)}
.lang{display:flex;border-radius:12px;overflow:hidden;flex:none}
.lang button{border:0;background:var(--on-dark);font:600 13px Poppins,sans-serif;
  color:var(--on-dark-ink);cursor:pointer}
.lang button[aria-pressed="true"]{background:#fff;color:var(--charcoal);font-weight:700}

/* ---------- podium cards (phone) ---------- */
.top3{display:flex;flex-direction:column;gap:8px}
.top3 .row{display:flex;align-items:center;gap:12px;background:var(--card);
  border-radius:16px;padding:12px 14px}
.top3 .row--1{background:var(--orange);box-shadow:0 3px 0 var(--orange-dark)}
.medal{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:"Baloo 2",cursive;font-weight:800;font-size:20px}
.medal--1{background:var(--gold);color:var(--gold-ink)}
.medal--2{background:var(--silver);color:var(--silver-ink)}
.medal--3{background:var(--bronze);color:var(--bronze-ink)}
.top3 .who{flex:1;min-width:0}
.top3 .name{font-family:"Baloo 2",cursive;font-weight:800;font-size:22px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row--1 .name,.row--1 .val{color:#fff}
.bar{height:6px;border-radius:4px;background:var(--track);margin-top:7px;overflow:hidden}
.row--1 .bar{background:rgba(255,255,255,.35)}
.bar>i{display:block;height:100%;background:var(--amber);border-radius:4px}
.row--1 .bar>i{background:#fff}
.top3 .score{text-align:right}
.top3 .val{font-family:"Baloo 2",cursive;font-weight:800;font-size:26px;line-height:1}
.unit{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.row--1 .unit{color:rgba(255,255,255,.85)}

/* ---------- rest of list ---------- */
.rows{display:flex;flex-direction:column;gap:8px}
/* The border is transparent rather than absent so a .r--hit does not grow 2px taller and
   shift 1px sideways the moment a search matches it. */
.rows .r{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;
  background:var(--card);border:1px solid transparent}
/* Same width as .medal so the ranks and the names below the podium line up with the ones
   inside it -- the two lists share a left edge and read as one column. */
.rows .rank{width:38px;text-align:center;font:700 15px Poppins,sans-serif;color:#a3a3a3}
.rows .nm{flex:1;font:600 16px Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .sc{font-family:"Baloo 2",cursive;font-weight:800;font-size:19px}
.rows .tm{width:56px;text-align:right;font:400 14px Poppins,sans-serif;color:#a3a3a3}

/* Every one of these is qualified with .rows so it outranks the desktop block's
   `.rows .track` / `.rows .track>i` further down the file rather than tying with them on
   specificity and losing on source order. */
.rows .r--hit{background:var(--hit);border-color:var(--hit-edge)}
.rows .r--hit .rank{color:var(--orange)}
.rows .r--hit .track{background:var(--hit-track)}
.rows .r--hit .track>i{background:var(--orange)}
.rows .r--hit .tm{color:var(--hit-time)}

.more{display:block;width:100%;text-align:center;padding:12px;border-radius:14px;
  background:var(--card);border:0;font:700 14px Poppins,sans-serif;color:var(--charcoal);cursor:pointer}
/* The live line and the pager's counter are the only text not sitting on a card, so they
   read straight off the blurred world. 6a could afford --muted grey over its cream veil;
   over the charcoal one that vanishes against mid-green, hence full charcoal. */
.live{display:flex;align-items:center;gap:8px;font:500 13px Poppins,sans-serif;color:var(--charcoal)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:#6CC24A;animation:pulse 1.6s infinite}
.live[data-stale="true"] .dot{background:#c9c4bd;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Third of the three texts that sit on the blurred world rather than on a card, and the
   one the operator sees every morning before anyone has played. --muted vanished into the
   green exactly as the pager's counter did. */
.empty{margin:0;padding:28px 8px;text-align:center;color:var(--charcoal);font-size:15px}

/* ---------- phone-first layout ---------- */
.masthead{padding:20px 20px 18px}
.masthead h1{font-size:34px;margin-top:14px}
.toolbar{padding:12px 20px}
.tabs button{padding:11px}
.lang button{padding:10px 14px}
main{padding:18px 20px 30px;display:flex;flex-direction:column;gap:14px}
/* The board stacks its groups -- podium, rows, load-more, pager -- at every width. */
.board{display:flex;flex-direction:column;gap:12px}
.desktop-only{display:none}
.podium{display:none}
/* The rail itself is only the live indicator on a phone; the summary and the how-to card
   are desktop furniture. */
.side{display:flex}
.stats,.howto{display:none}
.live{justify-content:center}

/* ---------- desktop ---------- */
@media (min-width:640px){
  .masthead{padding:34px 60px 30px;border-bottom-width:6px}
  .masthead__brand{gap:20px}
  .logo{width:46px;height:46px}
  .eyebrow{font-size:13px;letter-spacing:.2em}
  .masthead h1{font-size:74px;margin-top:26px}

  .toolbar{padding:16px 60px;gap:14px;flex-wrap:wrap}
  .tabs{flex:none;gap:10px}
  .tabs button{flex:none;padding:11px 26px;font-size:15px}
  /* Pushes the search and the language switch to the far end of the strip. */
  .search{margin-left:auto;padding:11px 18px;width:240px}
  .desktop-only{display:block}
  .lang button{padding:11px 17px;font-size:14px}

  main{max-width:1560px;margin:0 auto;padding:32px 60px 48px;
    display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
  .board{gap:10px}

  /* three-up podium */
  .podium{display:flex;gap:16px;margin-bottom:12px;align-items:flex-end}
  .podium .p{flex:1;background:var(--card);border-radius:20px;padding:20px;text-align:center}
  .podium .p--1{flex:1.15;background:var(--orange);padding:26px 20px;
    box-shadow:0 5px 0 var(--orange-dark)}
  .podium .medal{width:52px;height:52px;font-size:26px;margin:0 auto 12px}
  .podium .medal--1{width:64px;height:64px;font-size:32px}
  .podium .p .name{font-family:"Baloo 2",cursive;font-weight:800;font-size:24px;line-height:1}
  .podium .p--1 .name{font-size:30px}
  .podium .p--1 .name,.podium .p--1 .val,.podium .p--1 .unit{color:#fff}
  .podium .val{font-family:"Baloo 2",cursive;font-weight:800;font-size:34px;line-height:1;margin-top:10px}
  .podium .p--1 .val{font-size:46px}
  .podium .unit{margin-top:4px;letter-spacing:.14em;font-size:11px}

  /* desktop rows carry a bar and a time */
  .top3{display:none}
  .rows{gap:10px}
  .rows .r{border-radius:16px;padding:14px 20px;gap:18px}
  .rows .rank{width:34px;font-family:"Baloo 2",cursive;font-weight:800;font-size:20px}
  .rows .nm{flex:none;width:150px;font-size:19px;font-weight:700}
  .rows .track{flex:1;height:12px;border-radius:7px;background:var(--track);overflow:hidden}
  .rows .track>i{display:block;height:100%;background:var(--amber);border-radius:7px}
  .rows .sc{width:70px;text-align:right;font-size:24px}
  .rows .tm{width:70px}

  .pager{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
  .pager .of{font:600 14px Poppins,sans-serif;color:var(--charcoal)}
  .pager .btns{display:flex;gap:10px}
  .pager button{border:0;background:var(--card);border-radius:12px;padding:10px 20px;
    font:600 14px Poppins,sans-serif;color:var(--charcoal);cursor:pointer}
  .pager button.primary{background:var(--charcoal);color:#fff}
  /* After .primary, and resetting its background too -- equal specificity means source order
     decides, and the other way round a disabled "next" still read as the live dark button. */
  .pager button:disabled{background:var(--card);color:#b0aca7;cursor:default}

  /* side rail */
  .side{display:flex;flex-direction:column;gap:16px}
  .stats{display:block;background:var(--charcoal);border-radius:20px;padding:22px 24px}
  .stats h2{font:600 11px Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;
    color:var(--peach);margin-bottom:16px}
  .stats .s{margin-bottom:14px}
  .stats .s:last-child{margin-bottom:0}
  .stats .n{font-family:"Baloo 2",cursive;font-weight:800;font-size:34px;line-height:1;color:#fff}
  .stats .n--peach{color:var(--peach)}
  .stats .n--green{color:var(--green)}
  .stats .c{font:500 13px Poppins,sans-serif;color:rgba(255,255,255,.55);margin-top:3px}
  .howto{display:block;background:var(--card);border-radius:20px;overflow:hidden}
  .howto img{display:block;width:100%;height:120px;object-fit:cover}
  .howto .b{padding:18px 22px}
  .howto h2{font-family:"Baloo 2",cursive;font-weight:800;font-size:22px;line-height:1.2;margin-bottom:8px}
  .howto p{margin:0;font:400 14px/1.6 Poppins,sans-serif;color:#6b6b6b}
  .live{justify-content:flex-start}
  .more{display:none}
}

@media (prefers-reduced-motion:reduce){.dot{animation:none}}