/* UX round 4: returning players — challenge lobby in the stage (H1), achievement progress (H3), trend on the
   main screen (H4), 「翌月へ」 shortcut (H5), year summaries on the game-over screens (H6), rankings (H7).
   Loaded last. Everything is laid out in stage pixels (1280x720, scaled by core.js fitStage). */

/* ---------------- H1: challenge lobby / result inside the stage ---------------- */
.lx-screen { font-size: 16px; overflow: hidden; }
.lx-screen-body { overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.lx-challenge { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.lx-challenge > .lx-ch-card { grid-row: auto; }
.lx-ch-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lx-ch-card, .lx-ch-rank { min-width: 0; }
.lx-prefill { margin-top: -2px; }
.lx-go { display: flex; flex-direction: column; }
.lx-go .lx-challenge.lx-result { overflow: auto; min-height: 0; }
.lx-go-btns { flex-wrap: wrap; }

/* ---------------- H3: achievement progress ---------------- */
.lx-prog { margin-top: 4px; }
.lx-prog-text { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #2A6E66; }
.lx-prog-goal { font-weight: 400; color: #6b7b79; white-space: nowrap; }
.lx-prog-bar { height: 6px; background: #E3ECEB; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.lx-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, #09B2A8, #E6B422); border-radius: 3px; }
.lx-prog-lg .lx-prog-text { font-size: 14px; }
.lx-prog-lg .lx-prog-bar { height: 9px; }
.lx-next { background: #FFF8E1; border-radius: 10px; padding: 8px 10px 10px; }
.lx-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-card-next { align-items: flex-start; box-shadow: 0 1px 3px #0002, inset 0 0 0 2px #F5C000; }
.lx-card-next .lx-card-body { flex: 1; min-width: 0; }

/* ---------------- H4: change against last month on the tiles ---------------- */
.counter .sub { display: flex; justify-content: center; align-items: baseline; gap: 6px; min-height: 16px; white-space: nowrap; }
.kd { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd:empty { display: none; }
.kd.good { color: #1E7F5A; }
.kd.bad { color: #D23B33; }
.kd.flat { color: #789; font-weight: 700; }
.rank .nk { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.rank .nk .kd { font-size: 11px; }
.kdtip { font-size: 13px; line-height: 1.6; }
.kdtip b { font-variant-numeric: tabular-nums; }
.kdtip-note { font-size: 12px; color: #567; margin-top: 2px; }

/* staff board: ↑↓ since last month, NEW, 入社予定 */
.sc-motv:has(.sc-trend) { grid-template-columns: auto auto 1fr auto auto; }
.sc-trend { font-weight: 900; font-size: 13px; line-height: 1; }
.sc-trend.up { color: #1E7F5A; }
.sc-trend.down { color: #D23B33; }
.sc-new { font-size: 10px; font-weight: 900; color: #fff; background: #E8524A; border-radius: 4px; padding: 0 4px; letter-spacing: .5px; margin-right: 3px; }
.sc-joined { font-weight: 700; color: #B03A33; }
.scard.future { cursor: default; background: repeating-linear-gradient(135deg, #F7FBFA 0 8px, #EEF6F4 8px 16px); border: 2px dashed #9CCFC8; box-shadow: none; color: #456; }
.scard.future:focus-visible { border-color: var(--c-hover-exec); outline: none; }
.sc-future { font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: #D9EFFF; color: #2B55A8; }
.sc-when { font-size: 12px; color: #456; }
.sctip-trend { font-size: 12px; font-weight: 700; margin-top: 2px; }
.sctip-trend.up { color: #1E7F5A; }
.sctip-trend.down { color: #D23B33; }

/* ---------------- H5: 「翌月へ」 shortcut ---------------- */
.nextbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.nk-key { font-family: var(--font); font-size: 12px; font-weight: 900; line-height: 1; padding: 3px 6px; border-radius: 5px; border: 2px solid rgba(255, 255, 255, .75); background: rgba(0, 0, 0, .12); }
.nextbtn:focus-visible { outline: 4px solid #FFE84D; outline-offset: 2px; }

/* ---------------- H6: year summaries on the game-over screens ---------------- */
.yr-btns { display: contents; }

/* ---------------- H7: rankings (総合順位 and the challenge ranking share this look) ---------------- */
.rk-scroll { max-height: 470px; overflow: auto; border-radius: 8px; }
.modal .rk-scroll { max-height: 500px; }
.lx-ch-rank .rk-scroll { max-height: none; }
table.rk-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
table.rk-table th { background: var(--c-accent); color: #fff; font-weight: 700; padding: 5px 8px; text-align: left; position: sticky; top: 0; z-index: 1; border: 0; font-size: 13px; white-space: nowrap; }
table.rk-table td { padding: 5px 8px; border: 0; border-top: 1px solid #E3ECEB; white-space: nowrap; }
table.rk-table td.num, table.rk-table td.lx-num { text-align: right; font-variant-numeric: tabular-nums; }
table.rk-table td.rk-key { font-weight: 900; }
table.rk-table tr:hover td { background: #FFF3E0; }
.rk-rank { text-align: center; font-weight: 900; color: var(--c-teal-700); width: 48px; }
.rk-name { font-weight: 700; }
.rk-co { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.rk-cond { font-size: 13px; }
.rk-office { margin-left: 6px; color: #567; }
.rk-date { font-size: 12px; color: #567; }
table.rk-table tr.rk-me td { background: #FFF1B8; }
table.rk-table tr.rk-me td:first-child { box-shadow: inset 4px 0 0 #F0A800; }
.rk-you { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 900; color: #fff; background: #F07800; border-radius: 999px; padding: 0 7px; vertical-align: 1px; }
.rk-cond, .rk-note { margin: 6px 0 0; }
p.rk-cond { font-size: 13px; color: #2A6E66; font-weight: 700; margin: 4px 0 6px; }
.rk-title { margin: 0 0 6px; font-weight: 900; color: var(--c-teal-700); font-size: 17px; }
.rk .lx-tabs { margin-bottom: 6px; }
.lx-ch-rank table.rk-table { font-size: 13px; }
.lx-ch-rank table.rk-table th, .lx-ch-rank table.rk-table td { padding: 4px 6px; }
.lx-ch-rank .rk-co { max-width: 130px; }
/* the challenge ranking outside the lobby (総合順位 of a challenge game): the lx- colours */
.rk, .rk-panel {
  --lx-panel: var(--c-panel, #C2E8E4); --lx-light: var(--c-panel-light, #DAF1EF); --lx-accent: var(--c-accent, #09B2A8);
  --lx-dark: var(--c-teal-700, #2A6E66); --lx-text: var(--c-text, #0F172A); --lx-warn: var(--c-warn, #E8524A);
}
.yr-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.yr-row.empty { display: none; }
.yr-lbl { font-weight: 700; color: var(--c-teal-700); font-size: 14px; margin-right: 2px; }
.gameover .right h3 { margin: 6px 0; }
.yr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yr-head .yr-row { margin-top: 0; }