/* Levels, experience and achievements (progress.js): the level cog, the XP bar, the achievements, the
   characters' portraits unlocked, the finale's line, the notices, the badges in the top bar, the lobby and the
   tables, the portrait picker's characters and the note beside the analysis mode. The metals are the income
   compass's (income-compass.css --mtl-*): materials, the same in both themes; only the paper around them changes. */
:is(.lvm, .xpb, .xpb-bar, .ach-pop).band-bronze, .achm.m-bronze, .ach-pop.m-bronze {
  --m0: var(--mtl-bronze-0); --m1: var(--mtl-bronze-1); --m2: var(--mtl-bronze-2); --m3: var(--mtl-bronze-3); --m4: var(--mtl-bronze-4); }
:is(.lvm, .xpb, .xpb-bar, .ach-pop).band-silver, .achm.m-silver, .ach-pop.m-silver {
  --m0: var(--mtl-silver-0); --m1: var(--mtl-silver-1); --m2: var(--mtl-silver-2); --m3: var(--mtl-silver-3); --m4: var(--mtl-silver-4); }
:is(.lvm, .xpb, .xpb-bar, .ach-pop).band-gold, .achm.m-gold, .ach-pop.m-gold {
  --m0: var(--mtl-gold-0); --m1: var(--mtl-gold-1); --m2: var(--mtl-gold-2); --m3: var(--mtl-gold-3); --m4: var(--mtl-gold-4); }
:is(.lvm, .xpb, .xpb-bar, .ach-pop).band-diamond, .achm.m-diamond, .ach-pop.m-diamond {
  --m0: var(--mtl-diamond-0); --m1: var(--mtl-diamond-1); --m2: var(--mtl-diamond-2); --m3: var(--mtl-diamond-3); --m4: var(--mtl-diamond-4); }

/* ---- the level: a cog of the band's metal, the number on its face ---- */
.lvm {
  --s: 21px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); vertical-align: middle;
  clip-path: polygon(40.3% 9.6%, 44.3% 0.3%, 55.7% 0.3%, 59.7% 9.6%, 61.8% 10.2%, 69.9% 4.1%, 79.7% 9.8%, 78.6% 19.9%, 80.1% 21.4%, 90.2% 20.3%, 95.9% 30.1%, 89.8% 38.2%, 90.4% 40.3%, 99.7% 44.3%, 99.7% 55.7%, 90.4% 59.7%, 89.8% 61.8%, 95.9% 69.9%, 90.2% 79.7%, 80.1% 78.6%, 78.6% 80.1%, 79.7% 90.2%, 69.9% 95.9%, 61.8% 89.8%, 59.7% 90.4%, 55.7% 99.7%, 44.3% 99.7%, 40.3% 90.4%, 38.2% 89.8%, 30.1% 95.9%, 20.3% 90.2%, 21.4% 80.1%, 19.9% 78.6%, 9.8% 79.7%, 4.1% 69.9%, 10.2% 61.8%, 9.6% 59.7%, 0.3% 55.7%, 0.3% 44.3%, 9.6% 40.3%, 10.2% 38.2%, 4.1% 30.1%, 9.8% 20.3%, 19.9% 21.4%, 21.4% 19.9%, 20.3% 9.8%, 30.1% 4.1%, 38.2% 10.2%);
  background: var(--m0, #5a2d11);
}
.lvm::before { content: ''; position: absolute; inset: 1.3px; clip-path: inherit; background: linear-gradient(150deg, var(--m3), var(--m2) 32%, var(--m1) 64%, var(--m4)); }
/* the face: a coin inside the teeth */
.lvm::after { content: ''; position: absolute; inset: 19%; border-radius: 50%; background: linear-gradient(330deg, var(--m3), var(--m2) 45%, var(--m1));
  box-shadow: inset 0 0 0 .8px rgba(30, 20, 8, .45), 0 0 0 .8px rgba(255, 255, 255, .45); }
.lvm b { position: relative; z-index: 1; font: 700 calc(var(--s) * .47)/1 var(--f-sign); color: var(--mtl-ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.lvm.d2 b { font-size: calc(var(--s) * .38); letter-spacing: -.05em; }
.lvm.d3 b { font-size: calc(var(--s) * .3); letter-spacing: -.06em; }
.lvm.md { --s: 30px; }
.lvm.lg { --s: 56px; }
.lvm.lg::before { inset: 2.2px; }
.lvm.lg::after { box-shadow: inset 0 0 0 1.4px rgba(30, 20, 8, .45), 0 0 0 1.2px rgba(255, 255, 255, .5); }

/* ---- the bar towards the next level ---- */
.xpb { display: flex; align-items: center; gap: 12px; min-width: 0; }
.xpb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xpb-top { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.xpb-top b { font: 600 18px/1.1 var(--f-title); }
.xpb-num { font: 500 14px var(--f-sign); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.xpb-bar { position: relative; height: 10px; border-radius: 6px; background: var(--panel2); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 2px rgba(0, 0, 0, .14); }
.xpb-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(var(--m3), var(--m2) 28%, var(--m1) 62%, var(--m4));
  box-shadow: inset 0 0 0 1px rgba(30, 20, 8, .28); }
.xpb.compact .xpb-top b { font-size: 15px; }
/* the account page: the level under the name */
.acct-xp { margin: -4px 0 14px; max-width: 520px; }

/* ---- achievements ---- */
.ach-head h3 { margin: 0 0 2px; }
.ach-head p { margin: 0 0 4px; }
.ach-group { margin: 16px 0 7px; font: 500 11px var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.ach { display: flex; gap: 11px; align-items: center; padding: 8px 11px 8px 8px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--panel); min-width: 0; }
.ach.got { border-color: color-mix(in srgb, var(--accent-deep) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.ach-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ach-txt b { font-size: 14px; line-height: 1.25; }
.ach:not(.got) .ach-txt b { color: var(--muted); }
.ach-txt span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.ach.got .ach-txt span { color: var(--ink); }
.ach-txt small { font-size: 11.5px; margin-top: 2px; }
.ach-when { color: var(--good); font-weight: 700; }
/* an achievement's medal: a disc of its metal with the picture */
.achm { --s: 46px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--m3), var(--m2) 30%, var(--m1) 62%, var(--m4));
  box-shadow: 0 0 0 1px var(--m0), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .28); }
.achm::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(30, 20, 8, .32), 0 0 0 1px rgba(255, 255, 255, .38); }
.achm .ico { position: relative; width: 54%; height: 54%; color: var(--mtl-ink); --ico-line: rgba(255, 255, 255, .55); --ico-lw: .9; }
.achm .ico-bolt path { fill: var(--mtl-ink); stroke: rgba(255, 255, 255, .55); stroke-width: .9; paint-order: stroke; }
.achm .ach-face { position: relative; width: calc(100% - 9px); height: calc(100% - 9px); border-radius: 50%; object-fit: cover; object-position: 50% 28%; }
.achm.sm { --s: 32px; }
.achm.sm::before { inset: 3px; }
.achm.sm .ach-face { width: calc(100% - 7px); height: calc(100% - 7px); }
/* not earned yet: a plain grey disc */
.achm.off { background: var(--panel2); box-shadow: 0 0 0 1px var(--line); }
.achm.off::before { box-shadow: inset 0 0 0 1px var(--line-soft); }
.achm.off .ico { color: var(--muted); opacity: .55; --ico-line: none; filter: grayscale(1); }
.achm.off .ico-bolt path { fill: var(--muted); stroke: none; }
.achm.off .ach-face { filter: grayscale(1); opacity: .4; }

/* ---- the characters' portraits: unlocked in colour ---- */
.unl-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px 8px; }
.unl-list li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.unl-list img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--line); background: var(--panel2); filter: grayscale(1); opacity: .42; }
.unl-list li.got { color: var(--ink); font-weight: 600; }
.unl-list li.got img { filter: none; opacity: 1; border-color: var(--accent-deep); }

/* ---- the finale: what the game gave ---- */
.go-xp { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); display: flex; flex-direction: column; gap: 9px; text-align: left; }
.go-xp.up { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
p.go-xp.none { display: block; color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.go-xp-line { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font: 600 17px var(--f-sign); letter-spacing: .03em; }
.go-xp-line > b { flex: 0 1 auto; min-width: 0; }
@media (max-width: 760px) { .go-xp-line { font-size: 15.5px; } .go-xp-line > b { flex: 1 1 10em; } }
.go-xp-up { font: 800 11px var(--f-ui); color: var(--accent-ink); background: var(--accent); padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .08em; }
.go-ach, .go-unl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.go-ach li, .go-unl li { display: flex; align-items: center; gap: 10px; }
.go-ach li > span { display: flex; flex-direction: column; min-width: 0; }
.go-ach small { color: var(--muted); font-size: 12px; }
.go-unl img { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--accent-deep); }
.go-unl li > span { flex: 1; min-width: 0; font-weight: 600; }

/* ---- the notices: a card per new level, achievement or portrait, top right ---- */
#achPop { position: fixed; top: 66px; right: 14px; z-index: 66; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-width: min(340px, calc(100vw - 28px)); }
.ach-pop { display: flex; align-items: center; gap: 11px; padding: 8px 15px 8px 8px; border-radius: 11px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-left: 5px solid var(--m1, var(--accent)); box-shadow: var(--shadow-up); animation: achIn .5s cubic-bezier(.2, .9, .3, 1.25); }
.ach-pop.out { opacity: 0; transform: translateX(26px); transition: opacity .4s, transform .4s; }
.ach-pop small { display: block; font: 500 10.5px var(--f-sign); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.ach-pop b { font-size: 14.5px; line-height: 1.25; }
.ach-pop .pop-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--accent-deep); }
@keyframes achIn { from { opacity: 0; transform: translateX(42px) scale(.95); } }
/* phones: the top bar wraps to two rows — the notices come up from the bottom instead (above the hand) */
@media (max-width: 760px) { #achPop { left: 12px; right: 12px; top: auto; bottom: calc(var(--dock-h, 0px) + 14px); max-width: none; align-items: stretch; flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .ach-pop { animation: none; } .ach-pop.out { transition: none; } }

/* ---- the top bar: the level beside the account; a guest's level button ---- */
#topbar .acct-btn .lvm { --s: 20px; }
#topbar .gp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; font-size: 12.5px; margin-right: 6px; }
#acctbox { display: flex; align-items: center; }
@media (max-width: 760px) { #topbar .gp-btn > span:not(.lvm) { display: none; } #topbar .gp-btn { padding: 2px 3px; } }

/* ---- beside names: the lobby, the tables ---- */
.lobby-players .lvm { margin-left: -3px; }
table.lb .lvm { margin-right: 6px; }
.lb-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 10px; }
.lb-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); font-weight: 800; }
.lb-me { margin: 8px 0 0; font-weight: 600; }
/* the account page as a guest: the nudge to sign up */
.gp-nudge { border: 1px dashed color-mix(in srgb, var(--accent-deep) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; max-width: 640px; }
.gp-nudge p { margin: 0 0 10px; }
.st-tile .lvm { margin-bottom: 2px; }

/* ---- the portrait picker: the characters, unlocked by beating them ---- */
.face-sec { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 2px 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.face-sec b { font: 500 11.5px var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.face-sec small { color: var(--muted); font-size: 12px; }
.face-opt.locked { cursor: not-allowed; }
.face-opt.locked .face-opt-img { filter: grayscale(1); opacity: .38; }
.face-opt.locked .face-opt-name { font-size: 10.5px; }
.face-opt.locked::before { content: ''; position: absolute; top: 8px; left: 50%; margin-left: 18px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5.2a3 3 0 0 1 6 0V7' fill='none' stroke='%23615b4f' stroke-width='1.6'/%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.2' fill='%23615b4f'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 0 1px var(--line); }
.face-grid .face-opt.locked:hover { border-color: transparent; background: none; }

/* ---- beside the analysis mode: does this game give XP ---- */
.xp-note, .lobby-mode small.xp-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12.5px; line-height: 1.35; }
.xp-note .lvm { --s: 16px; margin-top: 1px; }
.xp-note.no { color: var(--warn); }
.xp-note.no .lvm { filter: grayscale(1); opacity: .6; }