/* screens/board.css: WP8, SPEC 3.7 (the leaderboard inside the menu stall).
   Markup: index.html #board + rows built by js/ui/board-view.js. Only transform and opacity animate. No filters.
   Layout per row: grid 3rem | 1fr | 4.5rem | 6rem | 3.5rem | 6.5rem (Mode hides below a 50rem stall body). */

/* ---------------------------------------------------------------- body: tabs, head, list, status */
#board .stall__body {
  padding: calc(1.1rem + var(--ow-l)) calc(1.25rem + var(--ow-l)) calc(.5rem + var(--ow-l));
  overflow: hidden; scrollbar-gutter: auto;
}
#board .board-body { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ---- tabs (2.5): the selected tab turns see-through; the heat ink slides under it */
#board-tabs { position: relative; z-index: 1; flex: none; height: 2.6rem; gap: .5rem; }
#board-tabs [role="tab"] { min-width: 0; padding: 0 .6rem; }
#board-tabs [role="tab"][aria-selected="true"] { background: transparent; border-color: transparent; box-shadow: none; }
#board .board-ink {
  position: absolute; left: 0; top: 0; z-index: 0; width: calc((100% - 1.5rem) / 4); height: 2.6rem;
  border: var(--ow) solid var(--ink); border-radius: var(--r-m) var(--r-m) var(--r-xs) var(--r-xs);
  background:
    radial-gradient(120% 90% at 30% 0, rgb(255 255 255 / .3), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--dif-color) 72%, #fff), var(--dif-color) 52%, color-mix(in oklab, var(--dif-color) 74%, #000));
  box-shadow: inset 0 .16rem 0 rgb(255 255 255 / .3), 0 .22rem 0 var(--ink);
  translate: 0 -.2rem;
  transform: translateX(calc(var(--i, 0) * (100% + .5rem)));
  transition: transform var(--t-base) var(--ease-snap);
}
#board .board-ink.is-still { transition: none; }
/* ---- the column head */
#board .board-row.head {
  flex: none; height: 1.4rem; margin: .55rem 0 .1rem; padding: 0 calc(.75rem + var(--ow-s));
  font: 900 var(--fs-small)/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
}
#board .board-row.head > :nth-child(3), #board .board-row.head > :nth-child(4) { text-align: center; }
#board .board-body:is([data-state="empty"], [data-state="error"]) .board-row.head { visibility: hidden; }
#board .board-row.head > .num { text-align: right; }

/* ---- the scrolling list */
#board-list {
  flex: 1 1 auto; min-height: 0; margin: 0 -.3rem; padding: .3rem .3rem .45rem;
  display: grid; grid-auto-rows: max-content; align-content: start; row-gap: .28rem;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto;
  border-radius: var(--r-s);
}

/* ---------------------------------------------------------------- rows */
#board .board-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 6rem 3.5rem 6.5rem; column-gap: .5rem; align-items: center; }
#board-list .board-row {
  position: relative; min-height: 2.3rem; padding: .12rem .75rem;
  border: var(--ow-s) solid rgb(44 15 21 / .16); border-radius: var(--r-s);
  background: var(--paper); color: var(--ink);
  font: 900 var(--fs-body)/1.2 var(--font-body);
}
#board-list .board-row:nth-child(even):not(.me) { background: var(--ivory-2); }

/* rank: an ink coin with the number; medals for the podium */
#board-list .rank {
  justify-self: center; display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem;
  border-radius: var(--r-pill); background: var(--ink); color: var(--ivory);
  font: 700 .95rem/1 var(--font-num); font-variant-numeric: tabular-nums;
}
#board-list .rank:is(.medal-1, .medal-2, .medal-3) {
  width: 2.05rem; height: 2.4rem; min-width: 0; margin: -.25rem 0; padding: 0 0 .62rem; border-radius: 0;
  background-color: transparent; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;
  color: var(--ink); font-size: .95rem; background-image: var(--medal);
  -webkit-text-stroke: max(1.5px, .14em) rgb(255 250 240 / .85); paint-order: stroke fill;
}
#board-list .rank.medal-1 { --medal: url(../../img/svg/medal-1.svg); }
#board-list .rank.medal-2 { --medal: url(../../img/svg/medal-2.svg); }
#board-list .rank.medal-3 { --medal: url(../../img/svg/medal-3.svg); }
#board-list .board-row.top-1 { background: linear-gradient(90deg, rgb(245 197 66 / .32), transparent 45%), var(--paper); border-color: rgb(176 122 18 / .55); }
#board-list .board-row.top-2 { background: linear-gradient(90deg, rgb(201 195 221 / .45), transparent 45%), var(--ivory-2); }
#board-list .board-row.top-3 { background: linear-gradient(90deg, rgb(205 140 90 / .28), transparent 45%), var(--paper); }

/* who: name (bidi-isolated, 14ch, ellipsis) + @handle + the YOU kicker */
#board-list .who { display: flex; flex-direction: row; align-items: baseline; gap: .5rem; min-width: 0; white-space: nowrap; }
#board-list .who b {
  flex: 0 1 auto; min-width: 0; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate;
  font: 900 var(--fs-body)/1.25 var(--font-body);
}
#board-list .who a {
  flex: 0 100000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 800 var(--fs-small)/1.2 var(--font-body); color: var(--cobalt); text-decoration: none;
}
@media (hover: hover) { #board-list .who a:hover { text-decoration: underline; text-underline-offset: .18em; } }
#board-list .who a:focus-visible { outline-offset: 2px; }
#board-list .you { flex: none; align-self: center; min-height: 1.3rem; padding: 0 .45rem; rotate: -5deg; box-shadow: 0 .14rem 0 var(--ink); }

/* mode pill */
#board-list .mode { justify-self: center; display: flex; }
#board-list .mode .pill { min-height: 1.35rem; padding: 0 .55rem; text-transform: none; letter-spacing: .02em; }

/* stars: 5 per row, red on, ash off, gold when flawless */
#board-list .st { display: flex; justify-content: center; gap: .02rem; white-space: nowrap; font: 900 1.02rem/1 var(--font-symbols); }
#board-list .st i { font-style: normal; color: var(--ivory-3); }
#board-list .st i.on { color: var(--red); -webkit-text-stroke: max(1px, .06em) var(--ink); paint-order: stroke fill; }
#board-list .st.gold i.on { color: var(--f2); -webkit-text-stroke-color: var(--gold-deep); }

/* numbers */
#board .num { text-align: right; font-variant-numeric: tabular-nums; }
#board-list .acc { font: 900 var(--fs-body)/1 var(--font-body); color: var(--ink-2); }
#board-list .pts { font: 900 1.15rem/1 var(--font-body); letter-spacing: .01em; }
#board-list .top-1 .pts { color: var(--gold-deep); }

/* ---------------------------------------------------------------- your row: fire strip, sticky at both edges */
#board-list .board-row.me {
  position: sticky; top: 0; bottom: .24rem; z-index: 2;
  border: var(--ow) solid var(--ink);
  background:
    radial-gradient(70% 140% at 12% 0, rgb(255 255 255 / .38), transparent 60%),
    linear-gradient(180deg, var(--f2), var(--f3));
  box-shadow: inset 0 .14rem 0 rgb(255 255 255 / .35), 0 .22rem 0 var(--ink);
}
#board-list .me .rank:not(.medal-1, .medal-2, .medal-3) { background: var(--ivory); color: var(--ink); box-shadow: 0 0 0 var(--ow-s) var(--ink); }
#board-list .me .who a { color: var(--cobalt-deep); }
#board-list .me .acc { color: var(--ink); }
#board-list .me .pts { color: var(--ink); }
#board-list .me .st i { color: rgb(44 15 21 / .28); }
#board-list .me .st i.on { color: var(--ivory); }
#board-list .me .mode .pill { box-shadow: 0 .12rem 0 var(--ink); }

/* the "you are further down" break */
#board-list .board-gap {
  display: flex; align-items: center; gap: .8rem; min-height: 1.1rem; padding: 0 1rem;
  color: var(--ink-2); font: 900 1rem/1 var(--font-symbols); letter-spacing: .25em;
}
#board-list .board-gap::before, #board-list .board-gap::after { content: ''; flex: 1; border-top: .14rem dashed rgb(91 58 64 / .45); }

/* ---------------------------------------------------------------- loading: 6 static skeleton rows (no shimmer) */
#board-list .board-skel {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 6rem 3.5rem 6.5rem; column-gap: .5rem; align-items: center;
  min-height: 2.3rem; padding: .12rem .75rem; border: var(--ow-s) solid rgb(44 15 21 / .1); border-radius: var(--r-s);
  background: rgb(255 250 240 / .7);
}
#board-list .board-skel i { display: block; height: .75rem; border-radius: var(--r-pill); background: var(--ivory-2); box-shadow: inset 0 .08rem 0 rgb(44 15 21 / .08); }
#board-list .board-skel i:nth-child(1) { justify-self: center; width: 1.75rem; height: 1.75rem; }
#board-list .board-skel i:nth-child(2) { width: 62%; height: .9rem; }
#board-list .board-skel:nth-child(3n + 2) i:nth-child(2) { width: 44%; }
#board-list .board-skel:nth-child(3n) i:nth-child(2) { width: 74%; }
#board-list .board-skel i:nth-child(3) { justify-self: center; width: 2.9rem; height: 1.25rem; }
#board-list .board-skel i:nth-child(4) { justify-self: center; width: 5rem; }
#board-list .board-skel i:nth-child(5) { justify-self: end; width: 2.4rem; }
#board-list .board-skel i:nth-child(6) { justify-self: end; width: 5rem; height: .9rem; }
#board-list .board-skel:nth-child(even) { opacity: .7; }
/* the skeleton list shows the Mode column only when the rows do */

/* ---------------------------------------------------------------- empty and error: one card in the list area */
#board-list .board-empty {
  display: flex; align-items: center; justify-content: center; gap: 2.2rem;
  min-height: 9.5rem; margin: 0; padding: .8rem 1.4rem;
  border: .16rem dashed rgb(91 58 64 / .4); border-radius: var(--r-m);
  background: radial-gradient(60% 90% at 30% 100%, rgb(255 210 58 / .2), transparent 70%), rgb(255 250 240 / .55);
}
#board .board-body:is([data-state="empty"], [data-state="error"]) #board-list { grid-auto-rows: minmax(0, 1fr); align-content: stretch; margin-top: -1.7rem; }
#board-list .board-empty__txt { display: grid; gap: .3rem; max-width: 22rem; }
#board-list .board-empty__txt b { font: 700 1.6rem/1.1 var(--font-display); font-stretch: 85%; color: var(--ink); }
#board-list .board-empty__txt small { font: 800 var(--fs-body)/1.35 var(--font-body); color: var(--ink-2); }

/* the empty podium: 2 · 1 · 3 steps with dashed tops, a ghost crown over the winner's step */
#board-list .board-empty__art { position: relative; display: flex; align-items: flex-end; gap: .25rem; height: 8.6rem; padding-top: 2.6rem; }
#board-list .podium {
  position: relative; display: grid; place-items: start center; width: 3.9rem; padding-top: .35rem;
  border: var(--ow) solid var(--ink); border-bottom-width: var(--ow-l); border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: url(../../img/svg/pat-seigaiha-ivory.svg) 0 0 / 1.6rem .8rem, var(--ivory-2);
  box-shadow: inset 0 .2rem 0 rgb(255 255 255 / .6), 0 .25rem 0 var(--ink);
  font: 700 1.3rem/1 var(--font-num); color: var(--ink-2);
}
#board-list .podium--1 { height: 5.6rem; background: url(../../img/svg/pat-seigaiha-red.svg) 0 0 / 1.6rem .8rem, var(--red); color: var(--ivory); -webkit-text-stroke: max(1.5px, .1em) var(--ink); paint-order: stroke fill; }
#board-list .podium--2 { height: 4.1rem; }
#board-list .podium--3 { height: 3rem; }
#board-list .podium--1::before { content: '1'; }
#board-list .podium--2::before { content: '2'; }
#board-list .podium--3::before { content: '3'; }
#board-list .podium--1::after {                  /* the crown nobody has claimed yet */
  content: ''; position: absolute; left: 50%; bottom: calc(100% + .35rem); width: 3rem; height: 2.5rem; translate: -50% 0;
  background: url(../../img/svg/crown.svg) 50% 100% / contain no-repeat; opacity: .6; rotate: -8deg;
}
#board-list .board-empty--empty .board-empty__art::after {   /* two twinkles by the crown */
  content: ''; position: absolute; left: 50%; top: -.2rem; width: 7.4rem; height: 3rem; translate: -50% 0; pointer-events: none;
  background: url(../../img/svg/twinkle.svg) 0 30% / 1.1rem auto no-repeat, url(../../img/svg/twinkle.svg) 100% 0 / .8rem auto no-repeat;
}
#board-list .board-empty--empty .board-empty__art::before {  /* a soft spotlight on the empty step */
  content: ''; position: absolute; left: 50%; bottom: 0; width: 7rem; height: 9rem; translate: -50% 0; z-index: -1;
  background: conic-gradient(from 160deg at 50% 0, transparent 0deg, rgb(255 210 58 / .28) 18deg, rgb(255 210 58 / .28) 22deg, transparent 40deg);
}

/* error / offline: a night note with the bichito's meh face */
#board-list .board-empty--error {
  border: var(--ow-s) solid var(--ink); background: url(../../img/svg/paper-grain.webp) 0 0 / 16rem, var(--grad-night);
  box-shadow: inset 0 0 0 .14rem rgb(246 240 228 / .14), 0 .25rem 0 var(--ink);
}
#board-list .board-empty--error .board-empty__art {
  width: 5.2rem; height: 5.2rem; padding: 0; border-radius: 50%;
  background: url(../../img/mascot/face-meh.svg) 50% 62% / 70% auto no-repeat, var(--f4);
  box-shadow: 0 0 0 var(--ow) var(--ink), 0 0 0 calc(var(--ow) + .2rem) rgb(246 240 228 / .5), inset 0 .35rem 0 rgb(255 255 255 / .25);
}
#board-list .board-empty--error .board-empty__txt b { color: var(--ivory); }
#board-list .board-empty--error .board-empty__txt small { color: var(--ivory-3); }

/* ---------------------------------------------------------------- status line */
#board-status {
  flex: none; display: flex; align-items: center; gap: .45rem; min-height: 1.4rem; margin-top: .25rem; padding: 0 .35rem;
  font: 800 var(--fs-small)/1.2 var(--font-body); color: var(--ink-2);
}
#board .board-body[data-state="list"] #board-status::before {
  content: ''; flex: none; width: 1.05rem; height: 1.05rem; background: url(../../img/svg/check.svg) 50% 50% / contain no-repeat;
}
#board .board-body[data-state="list"] #board-status:not(:empty)::after { content: '· every score server-verified'; color: rgb(91 58 64 / .8); }
#board .board-body[data-state="list"] #board-status:empty::after { content: 'Every score is server-verified'; }
#board .board-body[data-state="error"] #board-status { color: var(--red-deep); }
/* Loading…: three flame dots, a bright one stepping across (only while loading) */
#board .board-body[data-state="loading"] #board-status::after {
  content: ''; width: 2.2rem; height: .9rem; border-radius: var(--r-pill);
  background:
    radial-gradient(circle .17rem at calc(50% - .5rem) 50%, var(--f3) 0 calc(100% - .5px), transparent 100%),
    radial-gradient(circle .17rem at 50% 50%, var(--f3) 0 calc(100% - .5px), transparent 100%),
    radial-gradient(circle .17rem at calc(50% + .5rem) 50%, var(--f3) 0 calc(100% - .5px), transparent 100%),
    var(--ink);
  --loop: wp8-dots 600ms steps(3, jump-none) infinite; animation: var(--loop);
}
@keyframes wp8-dots { from { opacity: .55; } to { opacity: 1; } }

/* ---------------------------------------------------------------- entrances: rows rise (30ms stagger, set by the view) */
#board-list .in-rise { --dur: 260ms; --ease: var(--ease-out); }

/* ---------------------------------------------------------------- compact stall body (< 50rem): the Mode column goes */
@container (max-width: 50rem) {
  #board .board-row, #board-list .board-skel { grid-template-columns: 2.6rem minmax(0, 1fr) 5rem 3.4rem 6rem; }
  #board .board-row > :nth-child(3), #board-list .board-skel > :nth-child(3) { display: none; }
  #board-list .st { font-size: var(--fs-small); }
  #board-list .board-empty { gap: 1rem; }
  #board-list .board-empty__art { transform: scale(.85); }
}