/* ---------------------------------------------------------------------------
   The skill tree (src/skilltree.js): one look for every skill path in the
   game — the coaches' and the front office's. "In the room" (src/room.css):
   a navy board inside its window, the tiers as its stripes, pixel badges on
   a 3px grid (so every outline is the house 3px ink line), gold for what is
   yours, white for what you can take next, slate for what is still ahead.
   Every class is `skt-` prefixed.
--------------------------------------------------------------------------- */
.skt {
  container: skt / inline-size;
  margin: 3px; overflow: hidden; box-shadow: var(--frame);
  background: var(--win-2); color: #fff; font-family: var(--sans); font-weight: 800;
  /* the lines between nodes: [vertical, horizontal] per state */
  --skt-gold: #ffd34d;
  --lv-own:  linear-gradient(90deg, var(--ink) 0 2px, var(--skt-gold) 2px 6px, var(--ink) 6px);
  --lh-own:  linear-gradient(180deg, var(--ink) 0 2px, var(--skt-gold) 2px 6px, var(--ink) 6px);
  --lv-next: linear-gradient(90deg, var(--ink) 0 2px, #fff 2px 6px, var(--ink) 6px);
  --lh-next: linear-gradient(180deg, var(--ink) 0 2px, #fff 2px 6px, var(--ink) 6px);
  --lv-open: linear-gradient(90deg, var(--ink) 0 2px, #3b5783 2px 6px, var(--ink) 6px);
  --lh-open: linear-gradient(180deg, var(--ink) 0 2px, #3b5783 2px 6px, var(--ink) 6px);
  --lv-shut: repeating-linear-gradient(180deg, #2a3f66 0 6px, transparent 6px 12px);
  --lh-shut: repeating-linear-gradient(90deg, #2a3f66 0 6px, transparent 6px 12px);
}
.skt.one { max-width: 560px; margin: 0 auto; }
.skt button { font-family: var(--sans); }

/* --- the points counter ---------------------------------------------------- */
.skt-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--ink); }
.skt-pts { display: inline-flex; align-items: center; gap: 8px; margin: 3px; padding: 4px 12px 4px 8px; background: var(--ink-2); color: #fff;
  box-shadow: 0 0 0 3px var(--rule); }
.skt-pts .skt-gem { width: 21px; height: 21px; }
.skt-pts b { font: 400 34px/0.9 var(--disp); color: #8a9bb0; }
.skt-pts small { font: 900 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; }
.skt-pts.on { box-shadow: 0 0 0 3px var(--skt-gold); }
.skt-pts.on b { color: var(--skt-gold); }
.skt-auto { margin: 3px 3px 6px auto; cursor: pointer; padding: 6px 12px 5px; border: 0; background: #fff; color: var(--ink);
  box-shadow: var(--frame), 0 5px 0 0 #000, inset 0 -4px 0 0 var(--steel);
  font: 400 19px/1 var(--disp) !important; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.skt-auto:hover { background: var(--skt-gold); box-shadow: var(--frame), 0 5px 0 0 #000, inset 0 -4px 0 0 var(--gold-dk); }
.skt-gem { display: block; flex: none; width: 14px; height: 14px; }

/* --- phones: one path at a time, picked from tabs -------------------------- */
.skt-tabs { display: none; background: var(--ink); gap: 3px; padding: 0 3px 3px; }
.skt-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; cursor: pointer;
  padding: 7px 4px 6px; border: 0; border-radius: 0; background: var(--ink-2); color: #fff; }
.skt-tab b { font: 400 18px/0.95 var(--disp); text-transform: uppercase; text-align: center; }
.skt-tab.on { background: var(--skt-gold); color: var(--ink); }
.skt-tab.on .skt-prog i { background: var(--ink); } .skt-tab.on .skt-prog i.on { background: #fff; }

/* --- the board: a row per tier, a column per path -------------------------- */
.skt-r { display: grid; grid-template-columns: 44px repeat(var(--skt-np), minmax(0, 1fr)); }
.skt-r.b0 { background: var(--win-2); }
.skt-r.b1 { background: var(--zebra); }
.skt-hr { background: var(--ink); }
.skt-fr { background: var(--win); }
.skt-pc { min-width: 0; border-left: 3px solid var(--ink); }
.skt-bk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the tier rail: its number and what a node on it costs */
.skt-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--ink); }
.skt-t b { font: 400 26px/1 var(--disp); color: #fff; }
.skt-pips { display: flex; gap: 1px; }
.skt-pips .skt-gem { width: 11px; height: 11px; }

/* a path's name and how far down it he is */
/* names on one line across the paths, even when one shows Max instead of a bar */
.skt-ph { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 9px 6px 8px; text-align: center; }
.skt-ph b { font: 400 25px/0.92 var(--disp); text-transform: uppercase; color: #fff; }
.skt-prog { display: flex; gap: 2px; }
.skt-prog i { width: 7px; height: 9px; background: var(--rule); }
.skt-prog i.on { background: var(--skt-gold); }
.skt-max { padding: 2px 8px 1px; background: var(--skt-gold); color: var(--ink); box-shadow: var(--frame-2); font: 400 17px/1.1 var(--disp); text-transform: uppercase; }
.skt-tab .skt-prog i { width: 5px; height: 7px; }

/* --- a node, and the line through it --------------------------------------- */
.skt-c { position: relative; display: flex; justify-content: center; align-items: flex-start; min-width: 0; padding: 12px 3px 10px;
  --lin: none; --lout: none; }
.skt-c::before, .skt-c::after { content: ''; position: absolute; left: 50%; width: 8px; margin-left: -4px; }
.skt-c::before { top: 0; height: 20px; background: var(--lin); }
.skt-c::after { top: 36px; bottom: 0; background: var(--lout); }
.skt-c.i-own { --lin: var(--lv-own); } .skt-c.i-next { --lin: var(--lv-next); } .skt-c.i-open { --lin: var(--lv-open); } .skt-c.i-shut { --lin: var(--lv-shut); }
.skt-c.o-own { --lout: var(--lv-own); } .skt-c.o-next { --lout: var(--lv-next); } .skt-c.o-open { --lout: var(--lv-open); } .skt-c.o-shut { --lout: var(--lv-shut); }

.skt-n { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 100%;
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer; --sz: 60px; }
.skt-n.sig { --sz: 66px; }
.skt-n.cap { --sz: 72px; }
.skt-n:focus { outline: none; }
.skt-bdg { display: block; flex: none; }
.skt-n:hover .skt-bdg { transform: translateY(-2px); }

/* badge colours by state — fill, its shadow edge, the symbol, the ring */
.skt-bdg .b-o, .skt-bdg .b-i { fill: var(--ink); }
.skt-bdg .b-f { fill: var(--bf, #fff); }
.skt-bdg .b-s { fill: var(--bs, #b7c2cf); }
.skt-bdg .b-g { fill: var(--bg, var(--ink)); }
.skt-bdg .b-r { fill: var(--br, var(--skt-gold)); }
.skt-n.own, .skt-card.k-own   { --bf: #ffd34d; --bs: #d39d00; --bg: var(--ink); --br: #ffffff; }
.skt-n.next, .skt-card.k-next { --bf: #ffffff; --bs: #aebccc; --bg: var(--ink); --br: #ffd34d; }
.skt-n.open, .skt-card.k-open { --bf: #3d5169; --bs: #2d3d51; --bg: #9db0c7; --br: #62768e; }
.skt-n.shut, .skt-card.k-shut { --bf: #223041; --bs: #1a2533; --bg: #506279; --br: #34465c; }

/* the name under it */
.skt-nm { max-width: 100%; box-sizing: border-box; padding: 3px 6px 2px; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #000;
  font: 800 10.5px/1.15 var(--sans); letter-spacing: 0.3px; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.skt-n.own .skt-nm { color: var(--skt-gold); }
.skt-n.open .skt-nm { color: #b4c3d6; }
.skt-n.shut .skt-nm { color: #6f8197; }

/* its price, on the one you can take next — red when you cannot afford it */
.skt-tag { position: absolute; z-index: 3; top: -8px; left: calc(50% + var(--sz) / 2 - 16px); display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px 1px 3px; border: 0; box-shadow: var(--frame-2); background: var(--green); color: #fff;
  font: 900 12px/1.1 var(--sans); font-style: normal; }
.skt-tag .skt-gem { width: 11px; height: 11px; }
.skt-n.poor .skt-tag { background: var(--red); }
.skt-tag.lk { padding: 3px 4px; background: var(--ink); color: #8a9bb0; }
.skt-lk { display: block; flex: none; width: 10px; height: 12px; }

/* the cursor: four pixel corners round the node you are looking at */
.skt-n.sel::before, .skt-n:focus-visible::before {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  top: -7px; left: calc(50% - var(--sz) / 2 - 7px); width: calc(var(--sz) + 14px); height: calc(var(--sz) + 14px);
  --c: #fff;
  background:
    linear-gradient(var(--c) 0 0) left top / 16px 5px, linear-gradient(var(--c) 0 0) left top / 5px 16px,
    linear-gradient(var(--c) 0 0) right top / 16px 5px, linear-gradient(var(--c) 0 0) right top / 5px 16px,
    linear-gradient(var(--c) 0 0) left bottom / 16px 5px, linear-gradient(var(--c) 0 0) left bottom / 5px 16px,
    linear-gradient(var(--c) 0 0) right bottom / 16px 5px, linear-gradient(var(--c) 0 0) right bottom / 5px 16px;
  background-repeat: no-repeat;
  filter: drop-shadow(2px 2px 0 var(--ink));
  animation: skt-cur 0.9s steps(1) infinite;
}
.skt-n:focus-visible:not(.sel)::before { --c: var(--skt-gold); animation: none; }
@keyframes skt-cur { 50% { transform: scale(1.08); } }
/* what you can take right now bobs, a pixel at a time */
.skt-n.next:not(.poor) .skt-bdg { animation: skt-bob 1s steps(1) infinite; }
@keyframes skt-bob { 50% { transform: translateY(-3px); } }
/* what you just bought flashes in */
.skt-n.pop .skt-bdg { animation: skt-pop 0.5s steps(5); }
@keyframes skt-pop { 0% { transform: scale(1.45); } 40% { transform: scale(0.9); } 100% { transform: scale(1); } }
.skt-n.max .skt-bdg { animation: skt-glow 1.6s steps(1) infinite; }
@keyframes skt-glow { 50% { --br: #ffd34d; } }

/* --- the fork: one line splits in two, each branch under its banner -------- */
.skt-fk { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 14px; }
.skt-fs { position: absolute; left: 50%; top: 0; width: 8px; height: 22px; margin-left: -4px; background: var(--lv); }
.skt-fl { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; padding: 16px 4px 12px; }
.skt-fl::before { content: ''; position: absolute; top: 0; height: 8px; background: var(--lh); }
.skt-fl.A::before { left: 50%; right: -4px; }
.skt-fl.B::before { left: -4px; right: 50%; }
.skt-fl::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 8px; margin-left: -4px; background: var(--lv); }
.skt .l-own  { --lv: var(--lv-own);  --lh: var(--lh-own); }
.skt .l-next { --lv: var(--lv-next); --lh: var(--lh-next); }
.skt .l-open { --lv: var(--lv-open); --lh: var(--lh-open); }
.skt .l-shut { --lv: var(--lv-shut); --lh: var(--lh-shut); }
.skt-ban { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 6px); box-sizing: border-box;
  margin: 3px; padding: 4px 8px 3px; box-shadow: var(--frame); font: 400 18px/0.95 var(--disp); text-transform: uppercase;
  text-align: center; background: #3d5169; color: #fff; }
.skt-fl.took .skt-ban { background: var(--skt-gold); color: var(--ink); }
.skt-fl.pick .skt-ban { background: #fff; color: var(--ink); animation: skt-bob 1s steps(1) infinite; }
.skt-fl.shut .skt-ban { background: #223041; color: #6f8197; }
.skt-fi { display: block; width: 18px; height: 18px; background:
  linear-gradient(#fff 0 0) 7px 0 / 4px 8px, linear-gradient(#fff 0 0) 1px 6px / 16px 4px,
  linear-gradient(#fff 0 0) 1px 6px / 4px 12px, linear-gradient(#fff 0 0) 13px 6px / 4px 12px; background-repeat: no-repeat; }

@container skt (max-width: 640px) {
  .skt.multi .skt-tabs { display: grid; grid-template-columns: repeat(var(--skt-np), minmax(0, 1fr)); }
  .skt.multi .skt-hr { display: none; }
  .skt.multi .skt-r { grid-template-columns: 40px minmax(0, 1fr); }
  .skt.multi .skt-pc:not(.on) { display: none; }
}
@container skt (max-width: 380px) {
  .skt-r, .skt.multi .skt-r { grid-template-columns: 34px minmax(0, 1fr); }
  .skt-t b { font-size: 22px; }
  .skt-pips .skt-gem { width: 8px; height: 8px; }
  .skt-nm { font-size: 10px; padding: 2px 4px 1px; }
}

/* --- the card: the node you tapped ---------------------------------------- */
.skt-card { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px;
  align-items: center; margin: 12px 3px 3px; padding: 10px 14px 12px; border: 2px solid #fff;
  background: var(--win); color: #fff; box-shadow: var(--frame), var(--drop); --skt-gold: #ffd34d; }
.skt-card.one { max-width: 560px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
/* the badge at its own size: 3px a cell, like every pixel in the tree */
.skt-cb .skt-bdg { display: block; }
.skt-cc { display: flex; flex-wrap: wrap; gap: 4px; }
.skt-cc .skt-chip { white-space: normal; }
.skt-card h4 { margin: 4px 0 3px; font: 400 32px/0.95 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.skt-card ul { margin: 0; padding-left: 18px; font: 800 13.5px/1.35 var(--sans); }
.skt-card li::marker { color: var(--skt-gold); }
.skt-ca { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.skt-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px; padding: 4px 7px 3px; box-shadow: var(--frame-2);
  font: 900 10.5px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ink-2); white-space: nowrap; }
.skt-chip.ink { background: #fff; color: var(--ink); }
.skt-chip.gold { background: var(--skt-gold, #ffd34d); color: var(--ink); }
.skt-chip.bad { background: var(--red); }
.skt-chip.gray { background: var(--violet); }
.skt-chip .skt-gem { width: 12px; height: 12px; }
.skt-buy { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 3px 3px 6px; padding: 9px 10px 8px 16px; border: 0;
  background: var(--skt-gold); color: var(--ink); box-shadow: var(--frame), 0 6px 0 0 #000, inset 0 -4px 0 0 var(--gold-dk);
  font: 400 26px/1 var(--disp) !important; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.skt-buy span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 2px 5px; background: var(--ink); color: #fff;
  font: 900 15px/1 var(--sans); }
.skt-buy:hover { background: var(--gold-hi); }
.skt-buy:active { transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 #000, inset 0 -2px 0 0 var(--gold-dk); }
.skt-buy[disabled] { background: #6b7280; color: #fff; cursor: not-allowed; transform: none; box-shadow: var(--frame), 0 6px 0 0 #000, inset 0 -4px 0 0 #4b5563; }
.skt-go { cursor: pointer; margin: 3px 3px 6px; padding: 6px 11px 5px; border: 0; background: var(--ink-2); color: #fff;
  box-shadow: var(--frame), 0 4px 0 0 #000; font: 400 17px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.skt-go:hover { background: var(--skt-gold); color: var(--ink); }
.skt-err { grid-column: 1 / -1; margin: 3px; padding: 7px 10px; background: var(--red); color: #fff; box-shadow: var(--frame); font: 800 13px var(--sans); }
.skt-err[hidden] { display: none; }
@media (max-width: 640px) {
  .skt-card { grid-template-columns: auto minmax(0, 1fr); padding: 8px 10px 10px; }
  .skt-card h4 { font-size: 27px; }
  .skt-ca { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  /* a long branch name wraps instead of running off a small phone */
  .skt-buy { font-size: 23px !important; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; }
  .skt-buy span { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skt *, .skt *::before, .skt-card * { animation: none !important; }
}
.skt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===========================================================================
   Badges (src/skilltree.js, tree.kind 'badges'). One way round the screen:
   a tab per path across the top (its name and "3 of 16" — the badge steps
   bought in that path), the chosen path's tiles, and the card of the badge
   you tapped in one fixed spot beside them. Every tile, tab and card is the
   same window tile with the same 3px ink frame. A badge wears its tier —
   slate, bronze, silver, gold, Hall of Fame violet — and LEGENDARY alone is
   black with a gold frame and a gold ribbon: nothing else here looks like it.
   Every class `skb-`.
   ========================================================================= */
.skt.skb { display: grid; gap: 10px; margin: 0; overflow: visible; background: none; box-shadow: none;
  --skb-black: #06080d; }

/* the points, and what the tab count means */
.skb-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.skb-top .skt-pts { margin: 3px; }
.skb-hint { font: 900 11px/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }

/* the tabs: one per path */
.skb-tabs { display: grid; grid-template-columns: repeat(var(--skt-np), minmax(0, 1fr)); gap: 9px; padding: 3px; }
.skb .skb-tab { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; min-height: 46px;
  padding: 8px 10px 7px; box-sizing: border-box; background: var(--win-2); color: #fff; box-shadow: var(--frame); text-align: left; }
.skb .skb-tab b { font: 400 22px/0.95 var(--disp); text-align: left; }
.skb .skb-tab:hover { background: var(--win-3); }
.skb .skb-tab.on { background: var(--skt-gold); color: var(--ink); }
.skb-cnt { flex: none; padding: 3px 7px 2px; background: var(--ink); color: #fff; box-shadow: var(--frame-2);
  font: 900 11px/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.skb .skb-tab .skt-max { padding: 3px 7px 2px; font: 900 11px/1.1 var(--sans); letter-spacing: .04em; }
.skb .skb-tab.on .skt-max { background: var(--ink); color: var(--skt-gold); }

/* the tiles, and the card in its fixed spot beside them */
.skb-main { display: flex; align-items: flex-start; gap: 14px; }
.skb-panes { flex: 1 1 auto; min-width: 0; }
.skb .skb-pane { border: 0; }
.skb .skb-pane:not(.on) { display: none; }
.skb-side { position: sticky; top: 8px; z-index: 5; flex: 0 0 min(480px, 46%); min-width: 0; align-self: flex-start; }
.skb-side:empty { display: none; }
.skb-grid { display: grid; grid-template-columns: repeat(auto-fill, 124px); justify-content: start; gap: 18px 12px; padding: 14px 6px 6px; }
.skb-c { min-width: 0; }

/* a tile: every one the same box — picture, name plate, pips */
.skb .skb-n { display: grid; grid-template-rows: 72px 30px 14px; justify-items: center; align-items: center; gap: 6px;
  width: 124px; height: 152px; box-sizing: border-box; padding: 9px 6px 8px; background: var(--win-2); box-shadow: var(--frame); --sz: 72px; }
.skb .skb-n:hover { background: var(--win-3); }
.skb-art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.skb-art .skt-tag { top: -6px; left: auto; right: -14px; }
.skb .skb-n .skt-nm { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; padding: 1px 4px 0;
  font-size: 10.5px; line-height: 1.1; overflow: hidden; }
/* the cursor: the whole tile, white inside and four pixel corners round it */
.skb .skb-n.sel { background: var(--win-3); box-shadow: var(--frame), inset 0 0 0 3px #fff; }
.skb .skb-n.sel::before, .skb .skb-n:focus-visible::before { top: -9px; left: -9px; width: calc(100% + 18px); height: calc(100% + 18px); }

/* tier colours: fill, its shadow edge, the symbol, the ring */
.skb-n.t0, .skb-card.t0, .skb-ico.t0 { --bf: #3d5169; --bs: #2d3d51; --bg: #9db0c7; --br: #62768e; }
.skb-n.t1, .skb-card.t1, .skb-ico.t1 { --bf: #c0712f; --bs: #8a4c1d; --bg: #0d1b2a; --br: #0d1b2a; }
.skb-n.t2, .skb-card.t2, .skb-ico.t2 { --bf: #a3b0c2; --bs: #6b7789; --bg: #0d1b2a; --br: #0d1b2a; }
.skb-n.t3, .skb-card.t3, .skb-ico.t3 { --bf: #ffd34d; --bs: #d39d00; --bg: #0d1b2a; --br: #0d1b2a; }
.skb-n.t4, .skb-card.t4, .skb-ico.t4 { --bf: #7c3aed; --bs: #5b21b6; --bg: #ffffff; --br: #ffffff; }
.skb-n.t5, .skb-card.t5, .skb-ico.t5 { --bf: #161a24; --bs: #06080d; --bg: #ffd34d; --br: #ffd34d; }
/* the name plate wears the tier */
.skb .skb-n.t0 .skt-nm { background: var(--ink); color: #b4c3d6; }
.skb .skb-n.t1 .skt-nm { background: #c0712f; color: #fff; }
.skb .skb-n.t2 .skt-nm { background: #a3b0c2; color: var(--ink); }
.skb .skb-n.t3 .skt-nm { background: var(--skt-gold); color: var(--ink); }
.skb .skb-n.t4 .skt-nm { background: #7c3aed; color: #fff; }
.skb .skb-n.t5 .skt-nm { background: var(--skb-black); color: var(--skt-gold); box-shadow: 0 0 0 2px var(--skt-gold); }

/* LEGENDARY: a black tile in a gold frame, with its ribbon */
.skb .skb-n.t5, .skb .skb-n.t5:hover { background: var(--skb-black); box-shadow: 0 0 0 3px var(--skt-gold), 0 0 0 6px var(--ink); }
.skb .skb-n.t5.sel { box-shadow: 0 0 0 3px var(--skt-gold), 0 0 0 6px var(--ink), inset 0 0 0 3px #fff; }
.skb-rib { position: absolute; z-index: 4; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 2px; background: var(--skt-gold); color: var(--skb-black); box-shadow: 0 0 0 2px var(--ink);
  font: 400 15px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.skb-rib .skb-star { width: 12px; height: 12px; }
.skb-rib .skb-star .sf { fill: #fff; }

/* a whole board of buyable badges would all bob at once: the green price
   tag says it, and only the one you are looking at moves */
.skb .skb-n.next:not(.poor) .skt-bdg { animation: none; }
.skb .skb-n.next.sel:not(.poor) .skt-bdg { animation: skt-bob 1s steps(1) infinite; }
/* what you just bought flashes in, whatever else it is */
.skb .skb-n.pop.next.sel:not(.poor) .skt-bdg, .skb .skb-n.pop .skt-bdg { animation: skt-pop 0.5s steps(5); }

/* the pips: one square a tier, and a star only on a badge with a Legendary
   step — slate while its accomplishment is still ahead, gold once it is done */
.skb-pips { display: flex; align-items: center; gap: 4px; height: 14px; }
.skb-pips > i { display: block; width: 9px; height: 9px; background: var(--rule); box-shadow: 0 0 0 2px var(--ink); }
.skb-pips > i.on.t1 { background: #c0712f; }
.skb-pips > i.on.t2 { background: #a3b0c2; }
.skb-pips > i.on.t3 { background: #ffd34d; }
.skb-pips > i.on.t4 { background: #7c3aed; }
.skb-st { display: inline-flex; margin-left: 2px; }
.skb-star { display: block; width: 14px; height: 14px; }
.skb-star .sf { fill: #3b5783; }
.skb-st.open .skb-star .sf, .skb-st.on .skb-star .sf { fill: var(--skt-gold); }

/* the card: the badge you tapped */
.skt-card.skb-card { position: relative; bottom: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 3px; padding: 12px;
  border: 0; background: var(--win-2); box-shadow: var(--frame); }
.skb-ch { display: flex; align-items: center; gap: 12px; min-width: 0; }
.skb-card .skt-cb { flex: none; display: grid; place-items: center; width: 72px; height: 72px; }
.skb-card .skt-ci { min-width: 0; }
.skb-card h4 { margin: 5px 0 0; font-size: 30px; overflow-wrap: anywhere; }
.skb-card .skb-tc { background: var(--bf); color: var(--bg); }
.skb-card.t0 .skb-tc { background: var(--ink-2); color: #fff; }
.skb-card.t5 .skb-tc { background: var(--skb-black); color: var(--skt-gold); box-shadow: 0 0 0 2px var(--skt-gold), 0 0 0 4px var(--ink); }
.skb-does { margin: 0; font: 800 13.5px/1.3 var(--sans); color: #fff; }
.skb-lad { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.skb-l { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 4px 8px 4px 6px;
  background: var(--win); font: 700 13px/1.3 var(--sans); color: var(--soft); }
.skb-l b { display: inline-flex; align-items: center; gap: 6px; font: 400 18px/1 var(--disp); text-transform: uppercase; color: #fff; }
.skb-l b::before { content: ''; flex: none; width: 10px; height: 10px; background: var(--rule); box-shadow: 0 0 0 2px var(--ink); }
.skb-l.t1 b::before { background: #c0712f; } .skb-l.t2 b::before { background: #a3b0c2; } .skb-l.t3 b::before { background: #ffd34d; }
.skb-l.t4 b::before { background: #7c3aed; }
.skb-l.got { background: var(--win-3); color: #fff; }
.skb-l.got b { color: var(--skt-gold); }
.skb-l.nxt { background: #fff; color: var(--ink); }
.skb-l.nxt b { color: var(--ink); }
/* the Legendary step: its own black box in a gold frame, above Hall of Fame
   in rank and set apart from the ladder, with what it needs */
.skb-leg { position: relative; margin: 14px 6px 6px; padding: 16px 10px 9px; background: var(--skb-black); color: #fff;
  box-shadow: 0 0 0 3px var(--skt-gold), 0 0 0 6px var(--ink); }
.skb-leg .skb-rib { left: 10px; transform: none; }
.skb-leg p { margin: 0 0 7px; font: 800 13.5px/1.3 var(--sans); color: #fff; }
.skb-leg.open p, .skb-leg.got p { color: var(--skt-gold); }
.skb-need { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 900 11px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.skb-need .skt-lk { color: var(--skt-gold); }
.skb-lst { padding: 3px 7px 2px; box-shadow: 0 0 0 2px var(--ink); font: 900 10.5px/1.1 var(--sans); letter-spacing: .05em; }
.skb-lst.no { background: #fff; color: var(--ink); }
.skb-lst.done { background: var(--green); color: #fff; }
.skb-lst.got { background: var(--skt-gold); color: var(--ink); }
.skb-leg.got { animation: skb-shine 1.6s steps(1) infinite; }
@keyframes skb-shine { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); } }
.skb-noleg { padding: 2px 3px; font: 900 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.skb-card .skt-ca { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.skb-card .skt-chip.gray { background: var(--ink-2); color: #fff; }

/* one badge anywhere else in the game */
.skb-ico { display: inline-block; vertical-align: middle; line-height: 0; }
.skb-ico .skt-bdg { width: 30px; height: 30px; }

/* a narrow screen: the card goes under the tiles (a tap scrolls it into view) */
@container skt (max-width: 640px) {
  .skb-main { flex-direction: column; align-items: stretch; }
  .skb-side { position: static; flex: none; }
  .skb.multi .skb-tabs { grid-template-columns: repeat(min(var(--skt-np), 2), minmax(0, 1fr)); }
  .skb-grid { grid-template-columns: repeat(auto-fill, 112px); justify-content: center; gap: 18px 8px; }
  .skb .skb-n { width: 112px; }
}
@media (max-width: 640px) {
  .skb-l { grid-template-columns: 96px minmax(0, 1fr); padding: 4px 6px; }
  .skb-l b { font-size: 16px; }
}
/* a phone held sideways: a tighter strip and card, so the tabs, the tiles
   and the whole card fit one screen; the buy button moves up beside the name */
@media (orientation: landscape) and (max-height: 520px) {
  .skt.skb { gap: 6px; }
  .skb-top .skt-pts { padding: 2px 10px 2px 6px; }
  .skb-top .skt-pts b { font-size: 26px; }
  .skb .skb-tab { min-height: 36px; padding: 5px 8px 4px; }
  .skb .skb-tab b { font-size: 19px; }
  .skb-grid { gap: 16px 10px; padding-top: 12px; }
  .skb-side { top: 4px; }
  .skt-card.skb-card { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 8px 10px; }
  .skb-card > * { grid-column: 1 / -1; }
  .skb-card > .skb-ch { grid-column: 1; }
  .skb-card > .skt-ca { grid-column: 2; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-end; gap: 4px; }
  .skb-card .skt-cb { width: 60px; height: 60px; }
  .skb-card .skt-cb .skt-bdg { width: 60px; height: 60px; }
  .skb-card h4 { font-size: 24px; }
  .skb-does { font-size: 12px; line-height: 1.25; }
  .skb-l { grid-template-columns: 96px minmax(0, 1fr); padding: 2px 6px; font-size: 12px; line-height: 1.2; }
  .skb-l b { font-size: 16px; }
  .skb-leg { margin: 12px 6px 4px; padding: 13px 8px 6px; }
  .skb-leg p { margin-bottom: 4px; font-size: 12px; }
  .skb-card .skt-buy { margin: 0 3px 5px; padding: 6px 8px 5px 12px; font-size: 20px !important; }
}