/* The samples on the party game pages as little phone screens in each game's own look (Web Designer plus Game Designer,
   2026-10-24; briefs/game-page-samples-2026-10-24.md). Scott, on the plain sample cards: "can we make these more like the in
   game graphics". Built by game_samples() in site/build.py. Colours are each game's palette from prototype/src/party/fx.css
   (--t2 its poster colour, the night ground, the panels); components copy the engine (engine.css, the packs): the mono
   eyebrow, the Big Shoulders heading, the choice buttons, the dial, the secret card, the paper lines, the slots, the wave.
   Static: nothing moves. Phones: a swipeable row (the list scrolls, never the page). Wide: two across. */

.smp-list { --t2: #e3a72f; --ai: #2a1c04; --bg1: #283033; --bg2: #121516; --pn: #1f2426; --pn2: #262c2e; --ln: #3d4446; --cream: #ece4d2; --muted2: #b3ad9d;
  --paper: #efe3c4; --paper-ink: #201d17; }
/* ul.smp-list: beats .guide-body ul (fx.css), which loads earlier */
ul.smp-list { list-style: none; margin: 0.8rem 0 0.2rem; padding: 0.2rem 0 0.9rem; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.8rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 0.1rem; -webkit-overflow-scrolling: touch; width: 100%; min-width: 0; max-width: 100%; contain: inline-size; }
/* the row scrolls inside the column, so the column never grows to fit it */
.game-body > .story:has(> ul.smp-list) { min-width: 0; }
ul.smp-list:focus-visible { outline: 3px solid var(--t2); outline-offset: 4px; border-radius: 1rem; }
.smp-list > li { margin: 0; }
.smp-list > li::before, .smp-list > li::marker { content: none; }
.smp-swipe { margin: -0.4rem 0 0.2rem; font: 700 0.7rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted2); text-align: right; }
@media (min-width: 640px) {
  ul.smp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 1.1rem 1rem; padding-bottom: 0.4rem; }
  .smp-swipe { display: none; }
}

/* ---------- each game's palette (fx.css) ---------- */
.smp-which-would-ya { --t2: #f4c430; --ai: #2b2100; --bg1: #1f4d3a; --bg2: #0d1712; --pn: #16241d; --pn2: #1d2e25; --ln: #34493d; }
.smp-spot-the-blow-in { --t2: #48ccc0; --ai: #04201c; --bg1: #3b1d3f; --bg2: #110b14; --pn: #1d1a26; --pn2: #26222f; --ln: #3f3a4d; }
.smp-read-the-room { --t2: #f0c25a; --ai: #2a1c04; --bg1: #3c2a63; --bg2: #120e1a; --pn: #1f1a2b; --pn2: #282136; --ln: #433a57; }
.smp-dob-in-a-mate { --t2: #ff8a5c; --ai: #2b0f02; --bg1: #3b1f1a; --bg2: #140d0c; --pn: #241a19; --pn2: #2e2221; --ln: #4a3a38; }
.smp-two-truths-and-a-lie { --t2: #ffb347; --ai: #2b1800; --bg1: #2e1d3a; --bg2: #100c14; --pn: #1f1726; --pn2: #281e30; --ln: #44364f; }
.smp-pull-the-other-one { --t2: #ffd36b; --ai: #2a1c00; --bg1: #4a2e12; --bg2: #16100a; --pn: #261e16; --pn2: #30261c; --ln: #4d4032; }
.smp-checkout-time { --t2: #8fd8e0; --ai: #062226; --bg1: #0f2530; --bg2: #090e11; --pn: #152027; --pn2: #1d2a31; --ln: #33444d; }
.smp-near-enough { --t2: #ff7ab6; --ai: #2d0718; --bg1: #3a1a3a; --bg2: #120b13; --pn: #221624; --pn2: #2c1d2e; --ln: #4a3550; }
.smp-follow-the-mob { --t2: #ffa94d; --ai: #2a1500; --bg1: #3a2410; --bg2: #160f0a; --pn: #261b14; --pn2: #30231a; --ln: #4d3a2c; }
.smp-rank-em-blind { --t2: #ff6b5b; --ai: #2b0509; --bg1: #26163a; --bg2: #0e0a16; --pn: #1c1528; --pn2: #251c33; --ln: #3f3352; }
.smp-who-knows-ya-best { --t2: #ffd166; --ai: #2a1c00; --bg1: #3a2410; --bg2: #150e08; --pn: #241a12; --pn2: #2e2218; --ln: #4a3a2c; }
.smp-whats-that-racket { --t2: #9be15d; --ai: #142100; --bg1: #18361a; --bg2: #0d140d; --pn: #1a2418; --pn2: #222e1f; --ln: #3b4a36; }

/* ---------- the phone ---------- */
.smp-ph { position: relative; isolation: isolate; flex: 0 0 min(82%, 19rem); scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0;
  padding: 0 0.55rem 0.65rem; border-radius: 1.55rem; border: 5px solid #08090a; color: var(--cream); font-family: var(--body); text-align: left;
  background: radial-gradient(120% 75% at 50% 0%, var(--bg1) 0%, var(--bg2) 74%); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 16px 34px rgba(0, 0, 0, 0.5); }
.smp-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.smp-ph p { margin: 0; max-width: none; }
/* the speaker slot */
.smp-ph::before { content: ""; position: absolute; top: 0.32rem; left: 50%; width: 2.6rem; height: 0.3rem; margin-left: -1.3rem; border-radius: 99px; background: #08090a; z-index: 2; }
.smp-top { display: flex; align-items: center; gap: 0.5rem; margin: 0 -0.55rem; padding: 0.95rem 0.8rem 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--t2) 28%, var(--ln));
  background: color-mix(in srgb, var(--bg2) 82%, transparent); }
.smp-top b { font: 900 0.98rem/0.92 var(--display-plain, var(--display)); text-transform: uppercase; letter-spacing: 0.02em; color: var(--cream); }
.smp-top b i { font-style: normal; color: var(--t2); white-space: nowrap; }
.smp-code { margin-left: auto; font: 700 0.62rem/1 var(--mono); letter-spacing: 0.14em; color: var(--muted2); border: 1px solid var(--ln); border-radius: 99px; padding: 0.25rem 0.45rem; }
.smp-card { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.6rem; padding: 0.85rem 0.8rem 0.9rem; border-radius: 0.9rem;
  background: var(--pn); border: 1px solid color-mix(in srgb, var(--t2) 22%, var(--ln)); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }
.smp-eye { display: block; margin: 0; font: 700 0.68rem/1.35 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2); }
.smp-h { font: 900 1.3rem/1.02 var(--display-plain, var(--display)); text-transform: uppercase; letter-spacing: 0.01em; color: var(--cream); overflow-wrap: anywhere; }

/* choice buttons (engine .pk-choice): the picked one fills with the game's colour */
.smp-opts { display: grid; gap: 0.45rem; margin: 0; }
.smp-opts.smp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smp-opt { display: block; min-height: 2.6rem; padding: 0.55rem 0.7rem; border: 2px solid var(--ln); border-radius: 0.7rem; background: var(--pn2); color: var(--cream);
  font: 700 0.9rem/1.25 var(--body); }
.smp-grid .smp-opt { font-size: 0.82rem; padding: 0.5rem 0.55rem; display: flex; align-items: center; }
.smp-opt.is-on { background: var(--t2); border-color: var(--t2); color: var(--ai); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t2) 30%, transparent); }
.smp-opt small { font-weight: 400; font-size: 0.82rem; opacity: 0.85; }
.smp-btn { display: block; margin-top: auto; padding: 0.6rem 0.8rem; border-radius: 0.65rem; background: var(--t2); color: var(--ai); text-align: center; font: 700 0.92rem/1.2 var(--body); }
.smp-btn.is-gold { background: #e3a72f; color: #2a1c04; }
.smp-tag { display: inline-block; font: 700 0.62rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 0.3rem;
  background: var(--t2); color: var(--ai); vertical-align: middle; }

/* ---------- Which Would Ya?: the two sides, then the room splits ---------- */
.smp-split { display: grid; gap: 0.3rem; margin-top: auto; padding-top: 0.35rem; }
.smp-bar { display: flex; height: 2.3rem; border-radius: 0.65rem; overflow: hidden; border: 1px solid var(--ln); font: 700 0.86rem/1 var(--body); }
.smp-bar i { font-style: normal; display: flex; align-items: center; padding: 0 0.55rem; }
.smp-bar i:first-child { background: var(--t2); color: var(--ai); flex: none; }
.smp-bar i:last-child { flex: 1; justify-content: flex-end; background: #3d4446; color: var(--cream); }

/* ---------- the dial (engine dialHtml): Read the Room's target bands, Near Enough's guess ---------- */
.smp-dial { position: relative; display: block; width: 100%; max-width: 15rem; margin: 0.15rem auto 0; aspect-ratio: 2 / 1; }
.smp-dial-face { position: absolute; inset: 0; border-radius: 999px 999px 0 0; border: 2px solid #4b5254; border-bottom: 0;
  background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(217, 210, 191, 0.5) 0deg 0.8deg, transparent 0.8deg 18deg), #0f1415; }
/* ticks only on the rim: a dark disc over the middle */
.smp-dial-face::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; top: 12%; border-radius: 999px 999px 0 0; background: #0f1415; }
.smp-dial.has-t .smp-dial-face::after { background: radial-gradient(circle at 50% 100%, #0f1415 0 27%, transparent 27.5%), conic-gradient(from -90deg at 50% 100%,
  #0f1415 0 calc(var(--t) * 1.8deg - 36deg), #5e4630 0 calc(var(--t) * 1.8deg - 25.2deg), #9c5f27 0 calc(var(--t) * 1.8deg - 14.4deg),
  #d9902f 0 calc(var(--t) * 1.8deg - 5.4deg), #f0c25a 0 calc(var(--t) * 1.8deg + 5.4deg), #d9902f 0 calc(var(--t) * 1.8deg + 14.4deg),
  #9c5f27 0 calc(var(--t) * 1.8deg + 25.2deg), #5e4630 0 calc(var(--t) * 1.8deg + 36deg), #0f1415 0); }
.smp-needle { position: absolute; left: 50%; bottom: 0; width: 4px; height: 86%; margin-left: -2px; border-radius: 4px; background: #f3ead6; transform-origin: 50% 100%;
  transform: rotate(calc(var(--n) * 1.8deg - 90deg)); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }
.smp-near-enough .smp-needle { width: 6px; margin-left: -3px; background: var(--t2); box-shadow: none; }
.smp-near-enough .smp-needle::after { content: ""; position: absolute; top: -0.55rem; left: 50%; width: 1.25rem; height: 1.25rem; margin-left: -0.625rem; border-radius: 50%;
  background: var(--t2); border: 3px solid #fff; }
.smp-hub { position: absolute; left: 50%; bottom: -0.55rem; width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; border-radius: 50%; background: #2b3133; border: 2px solid #6b7374; }
/* the two ends as the game's pills joined by a bar */
.smp-ends { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 0.6rem; }
.smp-ends span:not(.sr-only) { flex: 1 1 0; min-width: 0; padding: 0.35rem 0.5rem; border: 2px solid var(--t2); border-radius: 0.65rem; background: var(--bg2);
  font: 800 0.9rem/1.05 var(--display-plain, var(--display)); text-transform: uppercase; text-align: center; color: var(--cream); overflow-wrap: anywhere; }
.smp-ends > i { flex: 0 0 1.2rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #9c5f27, var(--t2), #9c5f27); }
.smp-ends-num { justify-content: space-between; padding-top: 0.5rem; margin-top: 0; }
.smp-ends-num span:not(.sr-only) { flex: none; border: 0; background: none; padding: 0; font-size: 1.05rem; }
.smp-near-enough .smp-btn { margin-top: 0.35rem; }

/* ---------- Spot the Blow-in: the secret card, face up ---------- */
.smp-spot-the-blow-in .smp-ph { flex-basis: min(62%, 13rem); }
.smp-spot-the-blow-in .smp-card { padding: 0.7rem 0.5rem 0.6rem; }
.smp-spot-the-blow-in .smp-secret { padding: 0.8rem 0.3rem; }
@media (min-width: 640px) { ul.smp-spot-the-blow-in { grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr)); } }
.smp-secret { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 9.5rem; padding: 0.9rem 0.6rem;
  border-radius: 0.8rem; text-align: center; background: var(--paper); color: var(--paper-ink); border: 3px solid var(--t2);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px color-mix(in srgb, var(--t2) 45%, transparent), 0 12px 24px rgba(0, 0, 0, 0.45); }
.smp-secret .smp-eye { color: #5b3d0a; }
/* the word is sized to its card, so a long one (Mooloolaba) never breaks mid-word */
.smp-secret { container-type: inline-size; }
.smp-big { display: block; font: 900 min(1.8rem, 18cqi)/0.95 var(--display); text-transform: uppercase; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.smp-secret.is-blowin { background: rgba(14, 16, 17, 0.94); color: var(--cream); }
.smp-secret.is-blowin .smp-eye { color: var(--t2); }
.smp-secret.is-blowin .smp-big { color: var(--t2); }

/* ---------- Two Truths and a Lie: a paper line with its starter ---------- */
.smp-slip { display: grid; gap: 0.4rem; }
.smp-pick { display: block; padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: var(--paper); color: var(--paper-ink); border: 1px solid #b8a985; font: 700 1rem/1.25 var(--body);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transform: rotate(-0.6deg); }
.smp-fill { display: block; padding: 0.55rem 0.75rem; border-radius: 0.6rem; background: #121516; border: 1px solid #5a6264; color: #7d8587; font: 400 0.9rem/1.2 var(--body); }
.smp-tick { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; font: 400 0.86rem/1.2 var(--body); color: var(--muted2); }
.smp-tick > i { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #6b7374; background: #2b3133; }
.smp-tick.is-on { color: var(--cream); }
.smp-tick.is-on > i { border-color: var(--t2); background: radial-gradient(circle, var(--t2) 0 42%, #2b3133 46%); }
.smp-tick .smp-tag { background: #8f1f12; color: #fff; transform: rotate(-4deg); }

/* ---------- Pull the Other One: the fact with a blank ---------- */
.smp-fact { font: 700 1rem/1.4 var(--body); color: var(--cream); }
.smp-blank { display: inline-block; width: 4.2rem; height: 1.05em; margin: 0 0.2rem; vertical-align: -0.15em; border-bottom: 3px solid var(--t2);
  background: color-mix(in srgb, var(--t2) 14%, transparent); border-radius: 0.2rem 0.2rem 0 0; }
.smp-input { display: block; margin-top: auto; padding: 0.55rem 0.7rem; border-radius: 0.6rem; background: #121516; border: 1px solid #5a6264; color: #7d8587; font: 400 0.88rem/1.2 var(--body); }

/* ---------- Checkout Time: the staff, and a question by lamplight ---------- */
.smp-checkout-time .smp-ph.smp-wide .smp-opt { display: block; }
@media (min-width: 640px) { .smp-checkout-time .smp-ph.smp-wide { grid-column: 1 / -1; } }
@media (max-width: 639.98px) { .smp-checkout-time .smp-wide .smp-grid { grid-template-columns: 1fr; } }
.smp-story { font: italic 400 0.92rem/1.35 var(--body); color: var(--cream); }
.smp-alive { font-size: 0.82rem; line-height: 1.35; color: var(--muted2); }
.smp-alive b { color: var(--cream); }
.smp-ghost { margin-top: auto; }
.smp-ghost span { height: 2rem; border-radius: 0.6rem; border: 2px solid var(--ln); background: var(--pn2); }

/* ---------- Follow the Mob: the groups, the mob and the one left alone ---------- */
.smp-groups { display: grid; gap: 0.4rem; margin-top: auto; }
.smp-g { position: relative; display: flex; align-items: center; min-height: 2.2rem; border-radius: 0.6rem; overflow: hidden; background: #262c2e; border: 1px solid var(--ln); }
.smp-g > i { position: absolute; left: 0; top: 0; bottom: 0; background: #3d4446; }
.smp-g.is-mob { border: 2px solid var(--t2); }
.smp-g.is-mob > i { background: #5b3c26; }
.smp-g > span { position: relative; padding: 0.3rem 0.6rem; font: 400 0.84rem/1.2 var(--body); color: var(--cream); }
.smp-tag.is-alone { background: var(--cream); color: #201d17; }

/* ---------- Rank 'Em Blind: one thing at a time, five slots ---------- */
.smp-rank-em-blind .smp-eye > span:first-child { color: var(--cream); }
.smp-item { display: block; text-align: center; font: 900 1.7rem/0.95 var(--display); text-transform: uppercase; color: var(--t2); overflow-wrap: anywhere; }
.smp-board { display: grid; gap: 0.3rem; }
.smp-slot { display: grid; grid-template-columns: 1.4rem 1fr; align-items: center; gap: 0.3rem; min-height: 1.85rem; padding: 0.2rem 0.55rem; border-radius: 0.5rem;
  background: #262c2e; border: 1px dashed #5a6264; font: 700 0.84rem/1.15 var(--body); color: var(--cream); }
.smp-slot b { font-family: var(--mono); color: var(--t2); }
.smp-slot i { font-weight: 400; color: var(--muted2); }
.smp-slot.is-set { border-style: solid; border-color: var(--t2); }

/* ---------- What's That Racket?: the sound set and the wave ---------- */
.smp-set { font: 900 1.3rem/1.02 var(--display-plain, var(--display)); text-transform: uppercase; color: var(--cream); }
.smp-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.smp-chip { padding: 0.15rem 0.5rem; border-radius: 99px; border: 1px solid var(--t2); font: 700 0.72rem/1.3 var(--body); text-transform: none; color: var(--cream); }
.smp-wave { display: flex; gap: 0.3rem; justify-content: center; align-items: center; height: 3.4rem; margin-top: auto; }
.smp-wave i { width: 0.45rem; border-radius: 99px; background: var(--t2); opacity: 0.9; }
.smp-wave i:nth-child(1), .smp-wave i:nth-child(9) { height: 26%; } .smp-wave i:nth-child(2), .smp-wave i:nth-child(8) { height: 48%; }
.smp-wave i:nth-child(3), .smp-wave i:nth-child(7) { height: 70%; } .smp-wave i:nth-child(4), .smp-wave i:nth-child(6) { height: 88%; } .smp-wave i:nth-child(5) { height: 100%; }

/* ---------- each game's quiet motif behind the card (fx.css, held still) ---------- */
.smp-which-would-ya .smp-ph::after { background: radial-gradient(7rem 5rem at 15% 32%, rgba(252, 216, 84, 0.1), transparent 70%), radial-gradient(6rem 4rem at 82% 62%, rgba(126, 224, 161, 0.09), transparent 70%); }
.smp-read-the-room .smp-ph::after { background: repeating-radial-gradient(circle at 50% 118%, transparent 0 34px, rgba(240, 192, 84, 0.08) 34px 36px); }
.smp-dob-in-a-mate .smp-ph::after { background: radial-gradient(circle, rgba(255, 226, 160, 0.8) 0 2px, rgba(252, 170, 90, 0.25) 3px, transparent 10px) 0 2.9rem / 44px 30px repeat-x; }
.smp-two-truths-and-a-lie .smp-ph::after { background: radial-gradient(circle at 16% 12%, rgba(252, 180, 60, 0.22) 0 10px, rgba(252, 140, 40, 0.08) 22px, transparent 50px),
  radial-gradient(circle at 86% 14%, rgba(252, 180, 60, 0.2) 0 10px, rgba(252, 140, 40, 0.08) 22px, transparent 50px); }
.smp-pull-the-other-one .smp-ph::after { background: repeating-conic-gradient(from 150deg at 8% -6%, rgba(252, 204, 96, 0.07) 0deg 5deg, transparent 5deg 13deg); }
.smp-checkout-time .smp-ph::after { background: linear-gradient(170deg, transparent 0 44%, rgba(155, 227, 234, 0.12) 44% 47%, transparent 47%) 0 0 / 23px 76px,
  linear-gradient(170deg, transparent 0 46%, rgba(155, 227, 234, 0.07) 46% 48%, transparent 48%) 11px 30px / 37px 110px; }
.smp-near-enough .smp-ph::after { background: radial-gradient(3px 5px at 20px 30px, rgba(252, 120, 180, 0.45) 60%, transparent 70%), radial-gradient(5px 3px at 120px 70px, rgba(252, 216, 84, 0.4) 60%, transparent 70%),
  radial-gradient(3px 5px at 180px 150px, rgba(126, 224, 161, 0.4) 60%, transparent 70%), radial-gradient(5px 3px at 60px 200px, rgba(95, 211, 230, 0.4) 60%, transparent 70%);
  background-size: 220px 260px; opacity: 0.7; }
.smp-follow-the-mob .smp-ph::after { background: radial-gradient(70% 18% at 20% 104%, rgba(40, 22, 12, 0.85), transparent 72%), radial-gradient(80% 16% at 85% 106%, rgba(52, 30, 16, 0.8), transparent 72%); }
.smp-rank-em-blind .smp-ph::after { background: radial-gradient(1.4px 1.4px at 20px 30px, #fff8e6 50%, transparent 55%), radial-gradient(1px 1px at 90px 80px, #fff 50%, transparent 55%),
  radial-gradient(1.8px 1.8px at 160px 20px, #fff8e6 50%, transparent 55%), radial-gradient(1px 1px at 130px 150px, #fff 50%, transparent 55%); background-size: 200px 200px; opacity: 0.5; }
.smp-who-knows-ya-best .smp-ph::after { background: radial-gradient(50% 14% at 50% 100%, rgba(247, 191, 126, 0.18), transparent 70%), repeating-linear-gradient(0deg, transparent 0 14px, rgba(247, 191, 126, 0.05) 14px 15px); }
.smp-whats-that-racket .smp-ph::after { background: repeating-radial-gradient(circle at 92% 8%, transparent 0 22px, rgba(144, 216, 84, 0.09) 22px 24px); }
.smp-spot-the-blow-in .smp-ph::after { background: repeating-linear-gradient(0deg, transparent 0 20px, rgba(72, 204, 192, 0.08) 20px 22px);
  -webkit-mask-image: linear-gradient(180deg, transparent 55%, #000 100%); mask-image: linear-gradient(180deg, transparent 55%, #000 100%); }

/* Windows high contrast: keep the chosen button and the bars visible */
@media (forced-colors: active) { .smp-opt.is-on, .smp-bar i:first-child, .smp-btn { border: 2px solid CanvasText; } }

/* the guide column colours every <b> in a list (fx.css .guide-body li b): inside the phones, bold keeps its own colour */
ul.smp-list li b { color: inherit; }
ul.smp-list b.smp-tag { color: var(--ai); }
ul.smp-list b.smp-tag.is-alone { color: #201d17; }
ul.smp-list .smp-tick b.smp-tag { color: #fff; }
ul.smp-list .smp-slot b { color: var(--t2); }
ul.smp-list .smp-alive b { color: var(--cream); }