/* Progress, daily tasks, VIP, the cemetery and the station's cells (web/js/progress.js, vip.js, cemetery.js, police.js; 2026-10-25) */
.level-chip, .roster-chip {
  pointer-events: auto; border: 0; border-radius: 999px; padding: .3em .9em; min-height: 30px; cursor: pointer;
  background: rgba(22, 21, 28, .72); color: #fff; font-weight: 800; font-size: 12px; white-space: nowrap; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 8px;
}
.roster-chip:hover { background: rgba(22, 21, 28, .88); }
/* the level and reputation, in the top-left panel under the wallet and the bank (a quiet row like the bank's) */
.me .level-chip { display: flex; width: max-content; margin: 1px 0 0; background: none; box-shadow: none; color: var(--ink); padding: 2px 0 0; min-height: 0; border-radius: 6px; font-size: 12px; gap: 6px; }
.me .level-chip:hover { background: rgba(0, 0, 0, .05); }
.me .level-chip .lvl { color: var(--ink); }
.me .level-chip .exp-bar { width: 56px; }
.me .level-chip .exp-track { background: rgba(0, 0, 0, .12); }
.me .level-chip .badge-rep { font-size: 10px; padding: 0 6px; }
.level-chip.ring { animation: levelring .9s ease-out 2; }
@keyframes levelring { 0% { box-shadow: 0 0 0 0 rgba(242, 211, 107, .9); } 100% { box-shadow: 0 0 0 14px rgba(242, 211, 107, 0); } }
.level-chip .exp-bar { width: 64px; }
.exp-bar { display: flex; flex-direction: column; gap: 4px; }
.exp-bar .exp-track { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.exp-bar .exp-track i { display: block; height: 100%; background: linear-gradient(90deg, #f2d36b, #e8a93a); border-radius: 3px; }
.exp-bar.big .exp-track { height: 12px; border-radius: 6px; background: var(--line, #e3dccb); }
.exp-bar.big small { color: var(--ink-soft, #5b5a52); font-weight: 700; }
.exp-pop { color: #f2d36b !important; }
.roster-chip { background: #2a3b6e; }
.toast.paycheck { background: #2f6a4a; color: #fff; }
.toast.paycheck::before { content: '✉ '; }
.toast.levelup { background: linear-gradient(90deg, #c9a23a, #e8a93a); color: #1e1a1c; }
.toast.daily { background: #1f5a3a; color: #fff; }
.standing-row { margin: 12px 0 4px; display: flex; align-items: center; gap: 6px; }
.daily-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.daily-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--line, #e3dccb); border-radius: 12px; background: #fff; }
.daily-list li.done { background: #eef8f1; border-color: #9fd8b4; }
.daily-list li.done .what { text-decoration: line-through; opacity: .7; }
.daily-list .tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9fd8b4; display: grid; place-items: center; font-weight: 900; color: #1f8a4a; }
/* cards: level, reputation, VIP */
.card-standing { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.badge-level, .badge-rep, .badge-vip { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 800; }
.badge-level { background: #23221f; color: #f2d36b; }
.badge-rep { background: #e8f1fb; color: #2a62c9; }
.badge-vip { background: linear-gradient(90deg, #c9a23a, #f2d36b); color: #2a1418; letter-spacing: .06em; }
.card-names .exp-bar { margin-top: 4px; max-width: 180px; }
.portrait.f-vip { box-shadow: 0 0 0 3px #c9a23a, 0 0 0 5px #2a1418; }
/* VIP membership */
.vip-perks { margin: 8px 0 12px; padding-left: 18px; }
.vip-cards { display: grid; gap: 8px; }
.vip-card { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: #2a1418; color: #f4efe2; border: 2px solid #c9a23a; }
.vip-card.life { background: linear-gradient(135deg, #2a1418, #5a1f2e); }
.vip-card .vip-price { color: #f2d36b; font-weight: 800; }
.vip-card .short { color: #ffb3a8; }
/* the cemetery's headstones */
.stone-card { text-align: center; padding: 8px 4px; }
.stone-card h2 { font-family: Georgia, serif; }
/* the station's list of who's in the cells */
.roster { display: grid; gap: 6px; }
.roster-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border: 2px solid var(--line, #e3dccb); border-radius: 12px; background: #fff; }
.roster-row span { grid-column: 1; font-size: 12px; color: #5b5a52; }
.roster-row small { grid-row: 1; grid-column: 2; font-weight: 800; }
.play-settings { margin: 6px 0 10px; } .play-settings summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); } .use-pill.aiming { background: #d9342b; color: #fff; }
/* the Tasks button (the day's tasks): a green badge with how many are left */
.tasks-btn { position: relative; }
.tasks-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #17b566; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
/* the level row makes the name panel taller: on a narrow screen the clock moves down to sit under it (app.css puts it there) */
@media (max-width: 820px) { .hud-mid { top: calc(118px + var(--safe-top)); } }
@media (max-width: 560px) { .hud-mid { top: calc(172px + var(--safe-top)); } }
/* tabs along the top of a panel (ui.js panelTabs): the Bag's */
.sheet-tabs { display: flex; gap: 4px; padding: 10px 52px 0 14px; overflow-x: auto; scrollbar-width: none; flex: none; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tab { border: 0; border-radius: 999px; padding: .35em .9em; background: rgba(0, 0, 0, .06); color: var(--ink-soft); font-weight: 800; font-size: 13px; white-space: nowrap; }
.sheet-tab.on { background: var(--green-deep, #12844a); color: #fff; }
/* a VIP member's colors (vip.js colourPicker) */
.vip-colour-box { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--line, #e3dccb); }
.vip-colour-box h3 { margin: 0 0 4px; }
.vip-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.vip-colours-label { flex: 0 0 100%; font-weight: 800; font-size: 13px; }
.vip-swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line, #e3dccb); cursor: pointer; padding: 0; }
.vip-swatch.plain { background: linear-gradient(135deg, #fff 45%, #d23b3b 47%, #d23b3b 53%, #fff 55%); }
.vip-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #16151c; }
.vip-swatch:focus-visible { outline: 3px solid #17b566; outline-offset: 2px; }
.vip-colour-preview { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #fffdf8; border: 2px solid var(--line, #e3dccb); font-size: 14px; }