/* LBC Events: extras on top of the Taco's Coconuts styles in style.css. */

.t-vault { background: linear-gradient(150deg, #C6F0DC, #3FB58A); }
.day.t-vault { background: linear-gradient(120deg, #DDF6EA, #9EE0C2); }
.day.t-tin { background: linear-gradient(120deg, #DDF5C8, #B4E88A); }
.day.t-rag { background: linear-gradient(120deg, #FFE2BD, #FFB65C); }
.day.t-dark { background: linear-gradient(120deg, #8A5A44, #4E2E22); color: #fff; }
.day.t-dark .num { background: #fff; color: var(--ink); }

/* Stat chips under the header */
.stats .dchip { flex: 1 1 130px; }
.stats .dchip b { font-family: 'Outfit','Cairo',sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; }

/* Name search */
.find {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid #CBDCC8; border-radius: 16px; padding-inline-start: 14px; background: #fff;
}
.find .ic { color: var(--mut); width: 20px; height: 20px; }
.find .field { border: 0; min-height: 50px; padding-inline-start: 0; }
.find .field:focus { outline: none; }
.find:focus-within { outline: 3px solid var(--taco); outline-offset: 1px; border-color: var(--leaf); }

/* Results board, like the in-game "Your clanmates' results" list */
.board { border-radius: 24px; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(20,40,29,.45); background: #fff; }
.board-head, .res {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 0 16px;
}
.board-head {
  min-height: 44px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.board-head span:last-child { text-align: end; }
.results { list-style: none; margin: 0; padding: 0; }
.res { min-height: 54px; border-top: 1px solid var(--line); }
.res:nth-child(even) { background: #F8FBF5; }
.res .rk {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 15px;
  background: var(--on); color: var(--leaf-dark); font-variant-numeric: tabular-nums;
}
.res .who { min-width: 0; padding: 8px 0; }
.res .who b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res .was { display: block; font-size: 12px; color: var(--mut); }
.res .pts { font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.res.m1 .rk { background: var(--taco); color: var(--ink); box-shadow: 0 0 0 3px #FFE88F; }
.res.m2 .rk { background: #C9D3D8; color: var(--ink); }
.res.m3 .rk { background: #D99A6C; color: #fff; }
.res.m1 { background: #FFF8E0; }
.res.zero .pts { color: var(--hibiscus); }
.res.zero .who b { color: var(--mut); }
.res[hidden] { display: none; }
.none { padding: 16px; }

/* Not on the current clan roster: greyed out so it's obvious */
.res.gone { background: #F1F1EF; }
.res.gone .rk { background: #DADAD6; color: #6E6E68; box-shadow: none; }
.res.gone .who b, .res.gone .pts { color: #8C8C86; }
.res.gone .who b { font-weight: 500; }
.gone-tag { display: inline-block; margin-top: 3px; background: #E2E2DE; color: #6E6E68; }
.key { display: flex; align-items: center; gap: 8px; }
.key-dot { width: 14px; height: 14px; border-radius: 50%; background: #DADAD6; flex: none; }

/* Date bubble on an event's date list: month over day, so it reads over many months */
.day .num { width: 54px; height: 54px; flex-direction: column; line-height: 1; gap: 1px; }
.day .num small { font-family: 'DM Sans','Cairo',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

/* Calendar: Vaults colours */
.ev.t-vault { background: linear-gradient(120deg, #DDF6EA, #9EE0C2); }
.mdot.t-vault { background: #3FB58A; }

/* Event tiles: icon on top, name block pushed down, "next start" footer pinned to the bottom,
   so names and footers line up across a row whatever the screen width. */
.tile { justify-content: flex-start; gap: 12px; }
.tile .info { margin-top: auto; }

/* Next start: month/day badge (same idea as the date bubbles) plus two short lines that never wrap. */
.next {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding-top: 12px; border-top: 1px solid rgba(20,40,29,.14);
}
.nbadge {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(255,255,255,.72); color: var(--ink); line-height: 1;
}
.nb-top { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.nb-top:empty { display: none; }
.nb-big { font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.ntext { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nl1 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.nl2 { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next[data-state="loading"] .ntext, .next[data-state="none"] .ntext { opacity: .7; }

.next[data-state="live"] .nbadge { background: var(--hibiscus); color: #fff; }
.next[data-state="live"] .nb-big { font-family: 'DM Sans','Cairo',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.next[data-state="live"] .nbadge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-bottom: 3px;
  animation: pulse 1.4s ease-in-out infinite;
}
.next[data-state="live"] .nl1 { color: #B3261E; opacity: 1; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .next[data-state="live"] .nbadge::before { animation: none; } }

.t-dark .next { border-top-color: rgba(255,255,255,.2); }
.t-dark .nbadge { background: rgba(255,255,255,.16); color: #fff; }
.t-dark .next[data-state="live"] .nl1 { color: #FFB3B8; }

/* On an event page the same block sits in the green header as a white card. */
.top .next {
  position: relative; display: inline-flex; margin-top: 14px; padding: 8px 16px 8px 8px;
  border-top: 0; border-radius: 18px; background: #fff; color: var(--ink); max-width: 100%;
}
.top .nbadge { background: var(--on); }

/* Slightly wider minimum tile so the next-start line never gets cut off on tablets. */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(185px, 100%), 1fr)); }
@media (min-width: 861px) { .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* A date with no results (e.g. lost in the kingdom move): same row, quieter. */
.day.nodata { background: #F3F6EF; box-shadow: none; border: 1.5px dashed #CBDCC8; }
.day.nodata .num { background: #C9D6CC; color: var(--ink); }

/* ---------- Home: three doors ---------- */
.doors { display: grid; gap: 14px; }
@media (min-width: 861px) { .doors { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.door {
  display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 16px 18px; border-radius: 26px;
  text-decoration: none; color: var(--ink); box-shadow: 0 14px 24px -12px rgba(20,40,29,.5);
  transition: transform .15s ease;
}
.door:hover { transform: translateY(-2px); }
.door .dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.door .name { font-size: 23px; line-height: 1.15; }
.door .teaser { font-size: 14px; opacity: .8; }
.door .chev { opacity: .55; }
[dir="rtl"] .door .chev { transform: rotate(180deg); }
.door-p { background: linear-gradient(150deg, #FFE88F, #FFC72C); }
.door-e { background: linear-gradient(150deg, #B4E88A, #6CC04A); }
.door-c { background: linear-gradient(150deg, #C6F0DC, #3FB58A); }
@media (min-width: 861px) {
  .door { flex-direction: column; align-items: flex-start; min-height: 220px; padding: 22px; }
  .door .dtext { margin-top: auto; }
  .door .name { font-size: 28px; }
  .door .chev { position: absolute; display: none; }
}
@media (prefers-reduced-motion: reduce) { .door { transition: none; } }

/* ---------- Players list ---------- */
.ptools { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 861px) { .ptools { flex-direction: row; align-items: center; } .ptools .find { flex: 1; max-width: 420px; } }
.sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.sbtn {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.sbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Troop level filter: folds away under the sorts */
.pfilter { margin: 10px 0 14px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line); }
.pfilter summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 16px;
  font-weight: 700; font-size: 14px; cursor: pointer; list-style: none;
}
.pfilter summary::-webkit-details-marker { display: none; }
.pfilter summary::after { content: "▾"; color: var(--mut); transition: transform .2s; }
.pfilter[open] summary::after { transform: rotate(180deg); }
.fcount { margin-inline-start: auto; color: var(--leaf-dark); font-weight: 700; }
.fbody { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.frow { display: flex; flex-direction: column; gap: 6px; }
.flabel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.fopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; flex: 1; }
.fbtn {
  min-height: 36px; padding: 0 4px; border-radius: 10px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.fnone { grid-column: span 2; white-space: nowrap; }
.fbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fclear { align-self: flex-start; border: 0; background: none; padding: 4px 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--leaf-dark); text-decoration: underline; cursor: pointer; }
.fclear[hidden] { display: none; }
.pexport { margin: 14px 4px 0; text-align: end; }
@media (min-width: 861px) { .frow { flex-direction: row; align-items: center; } .flabel { width: 110px; flex: none; } .fopts { grid-template-columns: repeat(auto-fill, 52px); } }

.plist { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px -14px rgba(20,40,29,.45); }
.players { list-style: none; margin: 0; padding: 0; }
.prow { border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
.prow[hidden] { display: none; }
.prow a, .phead {
  display: grid; align-items: center; gap: 8px 12px; padding: 14px 14px 14px 18px; text-decoration: none; color: var(--ink);
  grid-template-columns: minmax(0, 1fr) auto 18px;
  grid-template-areas: "who might chev" "lv rank chev";
}
.prow a:hover { background: #F8FBF5; }
.pwho { grid-area: who; min-width: 0; display: flex; align-items: center; }
.prank { grid-area: rank; justify-self: end; }
.pwho b { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pplayed, .phead { display: none; }
.pmight { grid-area: might; font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; text-align: end; }
.plv { grid-area: lv; display: flex; align-items: center; gap: 10px; min-width: 0; }
.plv .was { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .ic { grid-area: chev; width: 18px; height: 18px; opacity: .4; }
[dir="rtl"] .prow .ic { transform: rotate(180deg); }

/* Clan rank badge: same order of importance as the game (Leader > Superior > Officer > Veteran) */
.rbadge {
  display: inline-block; min-width: 84px; text-align: center; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; line-height: 1.2;
}
.r-leader { background: var(--taco); color: var(--ink); }
.r-superior { background: var(--leaf); color: #fff; }
.r-officer { background: var(--on); color: var(--leaf-dark); }
.r-veteran { background: #EEF0EC; color: #5D665F; }

/* Troop levels: one bubble, written the way the clan posts them */
.lv-text {
  flex: none; padding: 4px 11px; border-radius: 10px; background: #F1F8EC; color: var(--leaf-dark);
  font-weight: 700; font-size: 13.5px; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.lv-none {
  flex: none; padding: 3px 10px; border-radius: 10px; border: 1.5px dashed #D3DDD5;
  font-size: 12.5px; font-weight: 600; color: var(--mut);
}

@media (min-width: 861px) {
  .prow a, .phead {
    grid-template-columns: minmax(200px, 1.4fr) 100px 100px minmax(200px, 1.3fr) 70px 18px;
    grid-template-areas: "who rank might lv played chev"; padding: 0 18px; min-height: 60px;
  }
  .phead {
    display: grid; min-height: 44px; background: var(--on); font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--leaf-dark);
  }
  .phead span:nth-child(3), .phead span:nth-child(5) { text-align: end; }
  .phead span:nth-child(1) { grid-area: who; } .phead span:nth-child(2) { grid-area: rank; }
  .phead span:nth-child(3) { grid-area: might; } .phead span:nth-child(4) { grid-area: lv; }
  .phead span:nth-child(5) { grid-area: played; }
  .prank { justify-self: start; }
  .pplayed { display: block; grid-area: played; text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; }
  .prow:nth-child(even) a { background: #FAFCF8; }
  .prow:nth-child(even) a:hover, .prow a:hover { background: #F1F8EC; }
}

/* ---------- One player ---------- */
.top-tag { position: relative; display: inline-block; margin-top: 10px; }
.pgrid { display: grid; gap: 22px; }
@media (min-width: 861px) {
  .pgrid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .pside { position: sticky; top: 24px; }
}
.pside { display: grid; gap: 14px; }
.pcard { border-radius: 24px; padding: 16px 18px; background: #F1F8EC; }
.plabel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.pbig { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px; }
.psub { font-size: 14px; color: var(--mut); margin-top: 6px; }
.grow-tag { display: inline-block; border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 13px; }
.grow-tag.up { background: #D7F2C4; color: #1F6B42; }
.grow-tag.down { background: #FDE2E3; color: #B3261E; }
.lvbig { font-size: 30px; letter-spacing: .01em; }

.pmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pmain h2 { margin: 0 !important; }
.hist { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 12px 26px -14px rgba(20,40,29,.45); }
.hhead { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 16px; font-size: 17px !important; color: var(--ink) !important; }
.hhead .ic { width: 20px; height: 20px; }
.hhead .hn { margin-inline-start: auto; font-family: 'DM Sans','Cairo',sans-serif; font-size: 13px; font-weight: 700; opacity: .75; }
.hhead.t-dark { color: #fff !important; }
.hlist { list-style: none; margin: 0; padding: 0; }
.hrow2 {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 16px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.hlist li:first-child .hrow2 { border-top: 0; }
.hrow2:hover { background: #F8FBF5; }
.hrow2 .num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--on); color: var(--leaf-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 17px;
}
.hrow2 .num small { font-family: 'DM Sans','Cairo',sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.place b { font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 19px; }
.place > span:not(.was):not(.tin) { color: var(--mut); font-size: 14px; }
.place .was { display: block; font-size: 12px; color: var(--mut); }
.hrow2 .pts { font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.hrow2.m1 .num { background: var(--taco); color: var(--ink); }
.hrow2.m2 .num { background: #C9D3D8; color: var(--ink); }
.hrow2.m3 .num { background: #D99A6C; color: #fff; }
.hrow2.zero .pts { color: var(--hibiscus); }

/* Two lists on one date (Dark Omens: Omen Essence + Remnants of Dread) */
.btabs { display: flex; gap: 6px; background: #fff; padding: 5px; border-radius: 999px; box-shadow: 0 6px 18px -10px rgba(20,40,29,.4); margin: 4px 0 8px; }
.btab { flex: 1; border: 0; background: transparent; font: 700 15px 'DM Sans','Cairo',sans-serif; color: var(--mut); padding: 10px 12px; border-radius: 999px; cursor: pointer; }
.btab[aria-selected="true"] { background: var(--leaf-dark, #1F5A3A); color: #fff; }
.bhint { margin: 0 4px 10px; font-size: 13px; }
.bpanel[hidden] { display: none; }
.bpanel .dchips { margin-bottom: 12px; }
.res.noname .who b { font-style: italic; }
.hrow2.multi { align-items: center; }
.mlines { display: grid; gap: 4px; min-width: 0; grid-column: 2 / -1; }
.mline { display: grid; grid-template-columns: 62px 1fr auto; align-items: baseline; gap: 8px; }
.mline i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.mline .mpl b { font-family: 'Outfit','Cairo',sans-serif; font-weight: 600; font-size: 17px; }
.mline .mpl span { color: var(--mut); font-size: 13px; }
.mline .pts { font-size: 16px; }
.mline.m1 .mpl b { color: #B07A00; }
.mline.zero .pts { color: var(--hibiscus); }
.mlines .was { font-size: 12px; color: var(--mut); }

/* Player page: "Show 5 more" under each event's history */
.hlist li[hidden] { display: none; }
.hist .morebar { display: flex; border-top: 1px solid var(--line); }
.hist .morebar [hidden] { display: none; }
.hist .less { flex: none; border: 0; border-inline-start: 1px solid var(--line); background: #F8FBF5; padding: 12px 16px;
  font: 700 14px 'DM Sans','Cairo',sans-serif; color: var(--mut); cursor: pointer; }
.hist .morebar .more { border-top: 0; flex: 1; }
.hist .more { display: block; width: 100%; border: 0; border-top: 1px solid var(--line); background: #F8FBF5; padding: 12px 16px;
  font: 700 14px 'DM Sans','Cairo',sans-serif; color: var(--leaf-dark); cursor: pointer; text-align: center; }
.hist .more span { font-weight: 500; color: var(--mut); }
.hist .more:hover { background: #EEF6E8; }
.hist .more[hidden] + .less { flex: 1; border-inline-start: 0; text-align: center; }

/* Nuts list: former name sits under the player's name */
.pwho { flex-direction: column; align-items: flex-start; justify-content: center; }
.pwho .was { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Dark Omens rows: bronze for a best placing of 3rd */
.mline.m2 .mpl b { color: #6E7C84; }
.mline.m3 .mpl b { color: #B5652F; }

/* Results pages: date arrows above the list too */
.pager.ptop { margin: 0 0 12px; }

/* Home: "This week" list (cards filled by calendar.js) */
.wk-title { font-size: 22px; margin: 0 2px 12px; }
/* One white panel with plain rows, so it doesn't look like the big doors above. Only the icon carries the event color. */
#wk-list { gap: 0; background: #fff; border-radius: 22px; padding: 4px 16px; box-shadow: 0 10px 26px -14px rgba(20,40,29,.45); }
#wk-list .ev { background: none; color: var(--ink); box-shadow: none; border-radius: 0; padding: 10px 0; gap: 12px; }
#wk-list .ev + .ev { border-top: 1px solid var(--line); }
#wk-list .ev .badge { width: 36px; height: 36px; border-radius: 12px; background: #EEF2EA; }
#wk-list .ev .badge .ic { width: 18px; height: 18px; }
#wk-list .ev .name { font-size: 16px; }
#wk-list .ev .when { font-size: 15px; }
#wk-list .t-vault .badge { background: #C6F0DC; }
#wk-list .t-tin .badge { background: #CFEFB2; }
#wk-list .t-oly .badge { background: #FFE88F; }
#wk-list .t-dark .badge { background: #8A5A44; color: #fff; }
#wk-list .t-rag .badge { background: #FFC98A; }
#wk-list .ev.live .when { background: #E5484D; color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
#wk-list .muted { margin: 12px 0; }

/* ---------- Chests card on a player page (chesttracker.com) ---------- */
.pbig small { font-size: .5em; color: var(--mut); font-weight: 600; }
.ctypes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.ctypes li { display: flex; justify-content: space-between; gap: 10px; }
.ctypes span { color: var(--mut); }
.crange { display: flex; gap: 6px; margin: 8px 0 4px; }
.crange button { border: 1.5px solid #D3DDD5; background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.crange button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cgoals, .ccrypts { border-top: 1px solid #DCE8D6; padding-top: 10px; }
.cgoals b { font-weight: 700; }
.res .tin { display: block; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.res .tin.full, .place .tin.full { color: #1F6B42; }
.place .tin { display: block; font-size: 12.5px; font-weight: 600; margin-top: 1px; }
.res .tin.miss, .place .tin.miss { color: #B4232A; }

/* ---------- Player page analytics (js/profile.js) ---------- */
.profile { display: grid; gap: 14px; margin-bottom: 18px; }
.ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ranges button { border: 1.5px solid #D3DDD5; background: #fff; border-radius: 999px; padding: 6px 14px; min-height: 32px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ranges button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.rwhen { color: var(--mut); font-size: 13px; margin-left: 4px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 8px 22px -14px rgba(20,40,29,.45); min-width: 0; }
.klabel { font-size: 13px; color: var(--mut); font-weight: 600; }
.kval { font-size: 26px; font-weight: 800; margin: 2px 0; overflow-wrap: anywhere; }
.kpi.lv .kval { font-size: 20px; }
.ksub { font-size: 12.5px; color: var(--mut); }
.charts { display: grid; gap: 12px; }
.chart { background: #fff; border-radius: 18px; padding: 12px 14px 10px; box-shadow: 0 8px 22px -14px rgba(20,40,29,.45); min-width: 0; }
.chart h3 { font-size: 15px; margin: 0 0 6px; }
.chart .h3b { margin-top: 14px; }
.plot { position: relative; }
.csvg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.csvg .grid { stroke: #E8EFE9; stroke-width: 1; }
.csvg .ytick { font-size: 11px; fill: var(--mut); text-anchor: end; }
.csvg .xtick { font-size: 11px; fill: var(--mut); }
.csvg .cline { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.csvg .cdot { fill: var(--leaf); }
.csvg .cdot.ring { stroke: #fff; stroke-width: 2; }
.csvg .hair { stroke: var(--mut); stroke-width: 1; stroke-dasharray: 3 3; }
.csvg .cbar { fill: #A9D3B5; }
.csvg .met .cbar { fill: var(--leaf); }
.csvg .hit { fill: transparent; }
.csvg .cbarg:hover .cbar, .csvg .cbarg:focus .cbar { fill: var(--leaf-dark); }
.csvg .cbarg:focus { outline: none; }
.csvg .goal { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.csvg .goaltxt { font-size: 11px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.ctip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; display: grid; gap: 1px; z-index: 2; }
.ctip[hidden] { display: none; }
.ctip span { opacity: .8; }
.cempty { color: var(--mut); font-size: 14px; margin: 8px 0; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hbars li { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 8px; font-size: 13.5px; }
.hlab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htrack { height: 10px; background: #EEF3EF; border-radius: 4px; overflow: hidden; }
.htrack i { display: block; height: 100%; background: var(--leaf); border-radius: 4px; }
.hbars b { font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.evrows { list-style: none; margin: 0; padding: 0; }
.evrows li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: baseline; padding: 8px 0; font-size: 13.5px; }
.evrows li + li { border-top: 1px solid var(--line); }
.evrows span { color: var(--mut); white-space: nowrap; }
.allres h2 { margin-top: 8px; }
@media (min-width: 760px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .charts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .evrows li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .evrows li b { grid-column: 1 / -1; }
}

/* ---------- Chests page: clan table (js/chests.js) ---------- */
.cboard .ptools { margin-top: 2px; }
.ctable { background: #fff; border-radius: 18px; box-shadow: 0 8px 22px -14px rgba(20,40,29,.45); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctable table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.ctable th, .ctable td { padding: 10px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); }
.ctable thead th { border-top: 0; position: sticky; top: 0; background: #F4F8F2; }
.ctable thead button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--mut); cursor: pointer; padding: 4px 0; min-height: 28px; }
.ctable thead button.on { color: var(--ink); }
.ctable thead th[aria-sort="descending"] button::after { content: " ↓"; }
.ctable thead th[aria-sort="ascending"] button::after { content: " ↑"; }
.ctable th:first-child, .ctable td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }
.ctable thead th:first-child { background: #F4F8F2; z-index: 2; }
.ctable tbody th a { color: var(--ink); font-weight: 700; text-decoration: none; }
.ctable tbody th a:hover { text-decoration: underline; }
.ctable tbody tr:nth-child(even) td, .ctable tbody tr:nth-child(even) th { background: #FAFCF8; }
.ctable td.ok { color: #1F6B42; font-weight: 600; }
.ctable td.miss { color: #B4232A; font-weight: 600; }
.cnote { font-size: 13px; margin: 0; }
#wkbtns { display: contents; }
.wkpick select { appearance: none; -webkit-appearance: none; border: 1.5px solid #D3DDD5; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E6656' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; border-radius: 999px; padding: 6px 30px 6px 14px; min-height: 32px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.wkpick select.on { background-color: var(--ink); border-color: var(--ink); color: #fff; }
.cboard .rwhen { margin: -6px 2px 0; }
.ctable td.wait { color: var(--mut); font-weight: 600; }