@font-face {
  font-family: Bangers;
  /* relative to this CSS file's URL (/stylesheets/) so it works from the
     iOS webview and the PWA drawer iframe alike; file:// was iOS-bundle-era
     and the filename was misspelled (Banges) — the shipped file is Bangers.ttf */
  src: url(../fonts/Bangers.ttf);
}

@font-face {
    font-family: Galapogo;
    src: url(../fonts/galapogo.ttf);
}

/* The rules below (leaderboard names, profile.ejs) ask for the font's REAL
   family name, "Galapogos BRK" (name table of galapogo.ttf) — the Galapogo
   alias above was never referenced by them, so the names column silently
   fell back to the system font on any device without the font installed
   (dev Macs have it installed, which masked this locally). Same file, so
   browsers download it once. */
@font-face {
    font-family: "Galapogos BRK";
    src: url(../fonts/galapogo.ttf);
}

/* Player names: Baloo 2 Bold — the same Latin + Latin-1 + punctuation subset
   the PWA ships (pwa/client/src/fonts/PlayerName-Baloo2-Bold.ttf, OFL text in
   ../fonts/Baloo2-OFL.txt), family name matching the PWA's
   PLAYER_NAME_FONT_FAMILY. No Hebrew/CJK glyphs, so those names fall through
   to the system face in the font-family stacks below. The weight range lets
   the single 700 file satisfy both normal and bold requests (the me-row is
   font-weight: bold) without faux-bolding. Relative to this CSS file, like
   Bangers above. Bump ?v= when the file changes. */
@font-face {
    font-family: "Yaniv Name Baloo2";
    src: url(../fonts/PlayerName-Baloo2-Bold.woff2?v=1) format("woff2"),
         url(../fonts/PlayerName-Baloo2-Bold.ttf?v=1) format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Hebrew companion (docs/player-name-font.md § Languages): Fredoka SemiBold, Hebrew block only, size-matched
   to Baloo 2 inside the file (unitsPerEm 1120). Chained after Baloo in every name stack, so Hebrew letters
   draw in it and everything else stays Baloo; other scripts fall through to the system face. */
@font-face {
    font-family: "Yaniv Name Hebrew";
    src: url(../fonts/PlayerName-Hebrew.woff2?v=1) format("woff2"),
         url(../fonts/PlayerName-Hebrew.ttf?v=1) format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

body {
  color: #3f2614;
  font-family: Bangers;
  background: #eec285;
  margin:0;
  padding: 0;
}


nav a {
  float: left;
  width: 45%;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  height: 35px;
  padding-top: 10px;
  margin-left: 10px;
  font-weight: bold;
  font-size: 20px;
  color:  #ffe2bb;
}

.achivements-page nav{
    display: none;
}
/* three tabs (Today / This Week / All Times) — the generic 45% wraps */
.leaderboard_page nav a {
  width: 30%;
  font-size: 17px;
}

.leaderboard_page ul {
    margin-top: 44px;
}

.leaderboard_page  * {
    box-sizing: border-box;
}


nav a[data-content='daily_achievements'] {
  border-bottom-left-radius: 10px;
}

nav a[data-content='daily_achievements'] {
  border-bottom-right-radius: 10px;
}

nav {
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  padding-top: 5px;

  color: #ffe2bb;
  background-color: #3f2614;
  border-bottom: #eec285 4px solid;
}

nav a.selected {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1000;
  background: #eec285;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%,#ffe2bb), color-stop(100%,#eec285)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #ffe2bb 57%,#eec285 100%); /* Chrome10+,Safari5.1+ */
  background: radial-gradient(ellipse at center, #ffe2bb 57%,#eec285 100%); /* W3C */
  color: #3f2614;
}

ul {
  clear: both;
  margin: 0;
  padding: 0;
  display: none;
}

ul {

  list-style: none;
  display: none;
  margin: 0;
  /*margin-top: 44px;*/
  padding: 0;

  background: #ffe2bb; /* Old browsers */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%,#ffe2bb), color-stop(100%,#eec285)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #ffe2bb 57%,#eec285 100%); /* Chrome10+,Safari5.1+ */
  background: radial-gradient(ellipse at center, #ffe2bb 57%,#eec285 100%); /* W3C */

}

ul.selected {
  display: block;
}

.achievements li, .leaderboard_page li {
  margin: 0;
  padding: 8px 0 8px 8px;
  border-bottom:  2px solid #d3ad80;
  color: #3f2614;
}

li#resetItem {
    text-align: center;
}

.achievements li {
    min-height: 54px;

}

.leaderboard_page li span{
    display: inline-block;
    margin-right: 8px;
    font-size: 22px;
    vertical-align: middle;
    height: 28px;
}

.leaderboard_page li {
    position: relative;
    min-height: 44px;
    vertical-align: middle;
}

.leaderboard_page li .rank {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: #3f2614;
    color: #ffe2bb;
    text-align: center;
    padding: 3px;
    font-size: 26px;
    line-height: 26px;
}


.leaderboard_page li .name {
    display: inline-block;
    font-family: "Yaniv Name Baloo2", "Yaniv Name Hebrew", -apple-system, system-ui, sans-serif;
    /* Baloo 2's line box is ~1.6em tall (vs Galapogos' ~1.1em): at the old
       26px its descenders (g y p _) were cut by the 28px overflow box and the
       glyphs sat low. 22px on a 28px line keeps the caps height close to the
       old look and the descenders inside the box. */
    font-size: 22px;
    line-height: 28px;
    height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 180px;
    /* RTL names (Hebrew / Arabic) keep their own direction inside the LTR row */
    unicode-bidi: plaintext;
}

.leaderboard_page li .score {
    height: 28px;
    position: absolute;
    right: 8px;
    top: 8px;
    margin-right: 0;
    padding-right: 6px;
}

.leaderboard_page li.me {
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    z-index: 100;
    background: #d3ad80;
    width: 100%;
    border-top:  2px solid #d3ad80;
    height: 26px;
}

.leaderboard_page .leaderboards {
    margin-bottom: 44px;
}

.leaderboard_page .daily_leaderboards {
    margin-bottom: 72px;
}


.leaderboard_page .daily_leaderboards li.me {
    margin: 0;
    height: 44px !important;
    bottom: 28px;
    background: #d3ad80;
}

.leaderboard_page .daily_leaderboards li.me div {
    margin: 0 0 -1px -10px;
    clear:both;
    background: #3f2614;
    color: #ffe2bb;
    text-align: center;
    font-size: 26px;
}

.leaderboard_page li.me .rank{
    background: none;
    width: auto;
    color:  #3f2614;
}

/* Safe-area bottom anchoring for the fixed me-row overlays (iOS
   home-button-less devices). Requires viewport-fit=cover in the page's
   viewport meta (leaderboard.ejs) — without it WKWebView reports
   env(safe-area-inset-bottom) as 0 and floats fixed-bottom elements above
   the home-indicator inset, leaving a gap below the reset banner.
   env() is 0 everywhere else (desktop, Android, non-notch iPhones), so
   these rules are byte-for-byte no-ops there. Media-scoped to the phone
   layout so the >=940px wide mode (me-row in column flow, not fixed) is
   untouched. */
@media (max-width: 939.98px) {
  /* All-times board: the me-row itself is the bottom-most strip. fixed
     bottom:0 pins its bottom edge at the physical bottom; the extra height
     keeps its top edge 26px above the inset (content stays where it was),
     and the extra padding keeps the text out of the home-indicator zone
     while the background fills through it. */
  .leaderboard_page .leaderboards li.me {
      height: calc(26px + env(safe-area-inset-bottom, 0px));
      padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  /* Today/This-Week boards (both uls carry .daily_leaderboards): raise the
     row by the inset and let the dark reset-banner div extend its
     background down through the inset instead of hovering above it. */
  .leaderboard_page .daily_leaderboards li.me {
      bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .leaderboard_page .daily_leaderboards li.me div {
      padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The overlays are now taller by the inset — grow the lists' clearance
     margins to match so the last row can still scroll out from under them. */
  .leaderboard_page .leaderboards {
      margin-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }
  .leaderboard_page .daily_leaderboards {
      margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}



.achievement .icon {
  float: left;
  width: 51px;
  height: 51px;
  border-radius: 28px;
  border: 2px solid #876d50;
  margin-right: 5px;
  position: relative;
}


.achievements li.achievement.achieved {
  color: #3f2614;
}

.achievements li.achievement.achieved .icon  {
  border-color: #311600;
}

.achievement h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-size: 51px 51px;
  }
}

/* Column headings for the wide leaderboard layout below. Hidden by
   default so phone rendering (iOS WKWebView ~390-430px, PWA phone
   drawer ≤560px) is untouched by the new markup. */
.board-title {
  display: none;
}

/* ==================================================================
   TV / wide layout (user 2026-08-15, feedback_tv_responsive_ui)

   Keyed on this document's OWN viewport — which is the drawer iframe's
   width in the PWA (the wide bottom-drawer shell is min(80vw, 1600px)
   at viewports >= 1200px, so >= 940px here means the TV drawer).
   Inert on phones: iOS WKWebView renders at ~390-430px and the phone
   PWA drawer caps the sheet at 560px, far below this threshold.
   ================================================================== */

/* ---- Achievements: 3-column card grid, @2x icons at 102px ---- */
@media (min-width: 940px) {
  body.achivements-page {
    padding: clamp(16px, 1.5vw, 40px);
  }
  .achivements-page ul.achievements.selected {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1vw, 28px);
    background: none;
  }
  .achivements-page .achievements li.achievement {
    min-height: 118px;
    padding: clamp(12px, 1vw, 26px);
    border: 2px solid #d3ad80;
    border-radius: 14px;
    background: #ffe2bb;
    background: radial-gradient(ellipse at center, #ffe2bb 57%, #eec285 100%);
  }
  /* 102px CSS icons; the page script forces the @2x sources at this
     width (see achievements.ejs isWide). !important beats the inline
     style.width/height the retina-scaling script writes. */
  .achivements-page .achievement .icon {
    width: 102px !important;
    height: 102px !important;
    border-radius: 55px;
    border-width: 3px;
    margin-right: clamp(10px, 0.8vw, 22px);
    background-size: 102px 102px !important;
  }
  .achivements-page .achievement h2 {
    font-size: clamp(24px, 1vw + 12px, 48px);
  }
  .achivements-page .achievements li.achievement div {
    font-size: clamp(18px, 0.75vw + 9px, 38px);
    margin-top: 4px;
  }
}

/* ---- Leaderboards: the three boards side-by-side instead of tabs ---- */
@media (min-width: 940px) {
  .leaderboard_page nav {
    display: none;
  }
  body.leaderboard_page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.4vw, 40px);
    padding: clamp(16px, 1.5vw, 40px);
    align-items: start;
  }
  /* User-prescribed column order: All-Time | This Week | Today */
  #board_alltime { order: 1; }
  #board_weekly  { order: 2; }
  #board_daily   { order: 3; }

  .leaderboard_page .board-title {
    display: block;
    margin: 0 0 clamp(8px, 0.7vw, 20px);
    text-align: center;
    font-size: clamp(30px, 1.4vw + 14px, 68px);
    font-weight: normal;
    color: #3f2614;
  }
  .leaderboard_page section.board {
    min-width: 0;
  }
  /* All three boards visible at once; tab-selection styling ignored. */
  .leaderboard_page ul {
    display: block;
    margin: 0;
    border: 2px solid #d3ad80;
    border-radius: 14px;
    overflow: hidden;
  }
  .leaderboard_page .leaderboards,
  .leaderboard_page .daily_leaderboards {
    margin-bottom: 0;
    margin-top: 0;
  }

  .leaderboard_page li {
    min-height: clamp(52px, 2.2vw + 26px, 118px);
    padding: clamp(10px, 0.8vw, 22px) clamp(12px, 1vw, 26px);
  }
  .leaderboard_page li span {
    font-size: clamp(22px, 0.95vw + 11px, 48px);
    height: auto;
  }
  .leaderboard_page li .rank {
    font-size: clamp(24px, 1vw + 12px, 52px);
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.75em;
    line-height: 1.5em;
    padding: 0;
  }
  .leaderboard_page li .name {
    font-size: clamp(22px, 1vw + 10px, 50px);
    line-height: 1.3;
    max-width: none;
    height: auto;
  }
  .leaderboard_page li .score {
    font-size: clamp(24px, 1.1vw + 12px, 56px);
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    right: clamp(12px, 1vw, 26px);
  }

  /* The "me" row joins the flow at the bottom of its own column instead
     of a fixed viewport-wide overlay (which would smear across all
     three boards). */
  .leaderboard_page li.me,
  .leaderboard_page .daily_leaderboards li.me {
    /* relative, not static: the absolutely-positioned .score must keep
       anchoring to the row. bottom:auto neutralizes the fixed-overlay
       offsets (0 / 28px), which as relative offsets would shift the row
       up over the records above it. */
    position: relative;
    bottom: auto;
    width: auto;
    height: auto !important;
    margin: 0;
    font-size: inherit;
    background: #d3ad80;
    border-bottom: none;
  }
  .leaderboard_page .daily_leaderboards li.me div {
    clear: both;
    margin: clamp(10px, 0.8vw, 22px) 0 0;
    border-radius: 10px;
    padding: clamp(4px, 0.4vw, 12px);
    font-size: clamp(20px, 0.8vw + 10px, 42px);
  }
}