/* Skiliograph Body City v1.2.1 (text 1.125× larger, fills the content width, Nov 7 2026) — shares the look of the Skiliograph math and reading games */
.skb-game {
  --skb-ink: #2b2d42;
  --skb-soft: #5c5f78;
  --skb-card: #ffffff;
  --skb-bg: #fff7e6;
  --skb-line: #e8dcc4;
  --skb-dash: #cfc4ad;
  --skb-sun: #ffcf4a;   --skb-sun-deep: #e8a917;
  --skb-sky: #a9dcff;   --skb-sky-deep: #7cbfee;
  --skb-lilac: #dccbff; --skb-lilac-deep: #b49ef0;
  --skb-peach: #ffd3a8; --skb-peach-deep: #f0ae70;
  --skb-mint: #bff0d4;  --skb-mint-deep: #7fd3a3;
  --skb-right: #8fe3a5; --skb-right-deep: #5cc27b; --skb-right-soft: #eafbef;
  --skb-no: #ffc2c7;    --skb-no-deep: #ee8f99;    --skb-no-soft: #fff1e6;
  --skb-leaf: #2f8f4f;  --skb-leaf-soft: #d8f3dc;
  --skb-gold: #ffb703;  --skb-gold-deep: #d99500;
  --skb-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  container-type: inline-size;
  container-name: skb;
  width: 100%;
  max-width: none;
  margin: 24px 0;
  padding: 16px 16px 24px;
  background: var(--skb-bg);
  border-radius: 24px;
  text-align: center;
  font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  color: var(--skb-ink);
  box-sizing: border-box;
  line-height: 1.35;
}
.skb-game *, .skb-game *::before, .skb-game *::after { box-sizing: border-box; }
.skb-game [hidden] { display: none !important; }
.skb-game p { margin: 0; }
.skb-game ol, .skb-game ul { margin: 0; padding: 0; list-style: none; }
.skb-game button {
  font-family: inherit; -webkit-tap-highlight-color: transparent; line-height: 1.2;
  text-transform: none; letter-spacing: normal; color: var(--skb-ink); margin: 0;
}
.skb-game button:focus-visible, .skb-game [tabindex]:focus-visible { outline: 4px solid var(--skb-ink); outline-offset: 3px; }
.skb-game [tabindex="-1"]:focus { outline: none; }
.skb-emo { font-family: var(--skb-emoji); font-weight: 400; line-height: 1; }

.skb-screen { display: flex; flex-direction: column; gap: 14px; }
.skb-title { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; color: var(--skb-ink); font-family: inherit; text-wrap: balance; }
.skb-lead { font-size: 20px; font-weight: 600; color: var(--skb-soft); text-wrap: balance; }
.skb-label { font-size: 17px; font-weight: 800; color: var(--skb-soft); letter-spacing: .03em; }
.skb-h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; font-family: inherit; color: var(--skb-ink); }
.skb-how { font-size: 19px; font-weight: 600; color: var(--skb-soft); max-width: 60ch; margin: 0 auto; text-wrap: balance; }
.skb-msg { min-height: 1.6em; font-size: 22px; font-weight: 700; text-wrap: balance; }

/* ---------- top bar ---------- */
.skb-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-bottom: 16px; padding: 8px 10px 8px 12px; text-align: left;
  background: var(--skb-card); border-radius: 18px; box-shadow: 0 4px 0 var(--skb-line);
}
.skb-where { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 220px; }
.skb-subject {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 3px 10px; border-radius: 999px; background: var(--skb-leaf-soft); color: var(--skb-leaf);
  font-size: 16px; font-weight: 800;
}
.skb-loc { font-size: 18px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skb-stats { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.skb-score {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px;
  background: var(--skb-sun); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 var(--skb-sun-deep);
}
.skb-score-star { color: #fff; text-shadow: 0 1px 0 var(--skb-sun-deep); }
.skb-badge-btn {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  padding: 4px 12px; cursor: pointer; font-size: 17px; font-weight: 800;
  background: #fff; border: 2px solid var(--skb-ink); border-radius: 999px;
}
.skb-badge-btn:hover { background: var(--skb-leaf-soft); color: var(--skb-ink); }
.skb-badge-btn .skb-emo { font-size: 20px; }
.skb-badge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- buttons shared with the other games ---------- */
.skb-big {
  display: block; width: 100%; padding: 15px 20px; cursor: pointer;
  font-size: 26px; font-weight: 800; color: var(--skb-ink);
  background: var(--skb-sun); border: none; border-radius: 18px;
  box-shadow: 0 6px 0 var(--skb-sun-deep);
  transition: transform .1s, box-shadow .1s;
}
.skb-big:hover { transform: translateY(-2px); background: var(--skb-sun); color: var(--skb-ink); }
.skb-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--skb-sun-deep); }
.skb-link {
  padding: 8px 12px; cursor: pointer; background: none; border: none;
  font-size: 18px; font-weight: 700; color: var(--skb-ink); text-decoration: underline; text-underline-offset: 4px;
}
.skb-link:hover { background: none; color: var(--skb-ink); }
.skb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skb-back {
  padding: 6px 14px; cursor: pointer; font-size: 18px; font-weight: 700; color: var(--skb-ink);
  background: #fff; border: 2px solid var(--skb-ink); border-radius: 999px;
}
.skb-back:hover { background: #fff; color: var(--skb-ink); }
.skb-back:active { transform: scale(.95); }
.skb-tag { font-size: 18px; font-weight: 800; padding: 5px 14px; border-radius: 999px; background: #fff; }
.skb-game[data-tone="sun"] .skb-tag { background: var(--skb-sun); }
.skb-game[data-tone="sky"] .skb-tag { background: var(--skb-sky); }
.skb-game[data-tone="lilac"] .skb-tag { background: var(--skb-lilac); }
.skb-game[data-tone="peach"] .skb-tag { background: var(--skb-peach); }
.skb-game[data-tone="mint"] .skb-tag { background: var(--skb-mint); }
.skb-modtitle { display: block; }
.skb-modtitle .skb-emo { font-size: 34px; margin-right: 8px; vertical-align: -2px; }
.skb-mod { display: flex; flex-direction: column; gap: 14px; }

/* ---------- journey map ---------- */
.skb-maphead { display: flex; flex-direction: column; gap: 4px; }
.skb-trail { position: relative; padding: 6px 0; }
.skb-trail-line { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.skb-trail-line path { fill: none; stroke: var(--skb-dash); stroke-width: 5; stroke-dasharray: 2 12; stroke-linecap: round; }
.skb-stops { position: relative; display: flex; flex-direction: column; gap: 18px; }
.skb-stop { display: flex; }
.skb-stop-l { justify-content: flex-start; }
.skb-stop-r { justify-content: flex-end; }
.skb-stop-btn {
  display: flex; align-items: center; gap: 14px; width: min(100%, 470px);
  padding: 12px 16px 12px 12px; cursor: pointer; text-align: left;
  border: 3px solid transparent; border-radius: 22px;
  box-shadow: 0 5px 0 rgba(43, 45, 66, .13);
  transition: transform .1s, border-color .15s;
}
.skb-stop-r .skb-stop-btn { flex-direction: row-reverse; text-align: right; padding: 12px 12px 12px 16px; }
.skb-stop-btn:hover { transform: translateY(-2px); color: var(--skb-ink); }
.skb-tone-sun   { background: #fff1a8; } .skb-tone-sun:hover   { background: #fff1a8; }
.skb-tone-sky   { background: #d6ecff; } .skb-tone-sky:hover   { background: #d6ecff; }
.skb-tone-lilac { background: #ebe1ff; } .skb-tone-lilac:hover { background: #ebe1ff; }
.skb-tone-peach { background: #ffe4cb; } .skb-tone-peach:hover { background: #ffe4cb; }
.skb-tone-mint  { background: #d6f6e3; } .skb-tone-mint:hover  { background: #d6f6e3; }
.skb-stop-bubble {
  position: relative; flex: 0 0 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 4px 0 rgba(43, 45, 66, .12);
}
.skb-stop-bubble .skb-emo { font-size: 38px; }
.skb-stop-num {
  position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--skb-ink); color: #fff; font-size: 16px; font-weight: 800;
}
.skb-stop-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.skb-stop-name { font-size: 24px; font-weight: 800; line-height: 1.15; }
.skb-stop-blurb { font-size: 17px; font-weight: 600; color: var(--skb-soft); line-height: 1.25; }
.skb-stop-stars { font-size: 25px; line-height: 1.1; letter-spacing: 2px; margin-top: 2px; }
.skb-mini-star { color: #ddd3bf; }
.skb-mini-star.is-on { color: var(--skb-gold); text-shadow: 0 2px 0 var(--skb-gold-deep); }
.skb-lock { font-size: 16px; font-weight: 800; letter-spacing: 0; color: var(--skb-soft); }
.skb-stop-btn.is-locked { background: #f1ebe0; box-shadow: 0 5px 0 #e3dacb; cursor: not-allowed; }
.skb-stop-btn.is-locked:hover { transform: none; background: #f1ebe0; }
.skb-stop-btn.is-locked .skb-stop-bubble { filter: grayscale(1); opacity: .55; }
.skb-stop-btn.is-locked .skb-stop-name { color: var(--skb-soft); }
.skb-stop-btn.is-done .skb-stop-bubble { box-shadow: 0 0 0 4px var(--skb-right-deep), 0 4px 0 rgba(43, 45, 66, .12); }
.skb-go { margin-top: 4px; }
.skb-grown { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; font-size: 16px; }
.skb-grown .skb-link { font-size: 16px; color: var(--skb-soft); }
.skb-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.skb-confirm-q { font-weight: 700; }
.skb-confirm-yes { padding: 6px 14px; cursor: pointer; font-size: 16px; font-weight: 800; color: #fff !important; background: #c4495a; border: none; border-radius: 999px; }
.skb-confirm-yes:hover { background: #a93a4a; }

/* ---------- cards you can drag ---------- */
.skb-tile {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; cursor: grab;
  font-size: 20px; font-weight: 800; color: var(--skb-ink); text-align: left;
  background: var(--skb-card); border: 3px solid transparent; border-radius: 16px;
  box-shadow: 0 4px 0 var(--skb-line); touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .1s, opacity .15s, border-color .15s;
}
.skb-tile:hover { background: var(--skb-card); color: var(--skb-ink); transform: translateY(-2px); }
.skb-tile .skb-emo { font-size: 32px; }
.skb-tile[aria-pressed="true"] { border-color: var(--skb-ink); transform: translateY(-3px); background: #fffbe8; }
.skb-tile.is-lifted { opacity: .3; }
.skb-ghost {
  position: fixed !important; left: 0; top: 0; margin: 0 !important; z-index: 99998; pointer-events: none;
  box-shadow: 0 14px 30px rgba(43, 45, 66, .25) !important; opacity: .95;
}
.skb-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.skb-recycle {
  display: flex; align-items: center; gap: 10px; max-width: 62ch; margin: 0 auto; padding: 10px 14px; text-align: left;
  font-size: 18px; font-weight: 600; background: var(--skb-card); border: 2px dashed var(--skb-right-deep); border-radius: 16px;
}
.skb-recycle .skb-emo { font-size: 29px; }

/* ---------- module 3: balance the ecosystem ---------- */
.skb-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; counter-reset: none; }
.skb-step {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 999px;
  background: #efe8da; color: var(--skb-soft); font-size: 17px; font-weight: 800;
}
.skb-step-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 15px; }
.skb-step.is-now { background: var(--skb-lilac); color: var(--skb-ink); box-shadow: 0 3px 0 var(--skb-lilac-deep); }
.skb-step.is-now .skb-step-num { background: var(--skb-ink); color: #fff; }
.skb-step.is-done { background: var(--skb-right-soft); color: var(--skb-leaf); }
.skb-step.is-done .skb-step-num { background: var(--skb-right-deep); color: #fff; font-size: 0; }
.skb-step.is-done .skb-step-num::after { content: "✓"; font-size: 16px; }
.skb-task { border: 3px solid var(--skb-lilac-deep); }
.skb-task-intro { font-size: 19px; font-weight: 600; color: var(--skb-soft); text-wrap: balance; }
.skb-task-hint { min-height: 1.3em; font-size: 19px; font-weight: 700; color: #b0495a; }
.skb-task-hint:empty { display: none; }
.skb-real { padding: 10px 14px; text-align: left; font-size: 18px; font-weight: 600; background: #fffbe8; border: 2px solid var(--skb-sun); border-radius: 14px; }
.skb-real-kicker { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--skb-sun-deep); }
.skb-lab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.skb-lab-left, .skb-lab-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.skb-season {
  min-height: 3.2em; padding: 10px 14px; font-size: 19px; font-weight: 700; text-align: left;
  background: #fffbe8; border: 2px solid var(--skb-sun); border-radius: 16px;
}
.skb-season { display: flex; flex-direction: column; gap: 2px; }
.skb-season-num { font-size: 15px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--skb-sun-deep); font-variant-numeric: tabular-nums; }
.skb-season.is-new .skb-season-text { animation: skb-rise-in .4s ease; }
.skb-ask { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--skb-card); border-radius: 20px; box-shadow: 0 5px 0 var(--skb-line); }
.skb-ask-q { font-size: 22px; font-weight: 800; text-wrap: balance; }
.skb-why { font-size: 19px; font-weight: 600; text-align: left; padding: 10px 12px; background: var(--skb-right-soft); border-radius: 14px; }
.skb-cont { align-self: center; width: auto; padding: 10px 22px; font-size: 22px; }

/* ---------- answer buttons (fact check, quiz, balance) ---------- */
.skb-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.skb-opt {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 14px; cursor: pointer;
  font-size: 21px; font-weight: 800; color: var(--skb-ink); text-align: center;
  border: none; border-radius: 18px; transition: transform .1s, box-shadow .1s;
}
.skb-opts-4 .skb-opt { justify-content: flex-start; text-align: left; }
.skb-opt-letter {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .7); font-size: 18px;
}
.skb-c0 { background: var(--skb-sky);   box-shadow: 0 5px 0 var(--skb-sky-deep); }
.skb-c1 { background: var(--skb-lilac); box-shadow: 0 5px 0 var(--skb-lilac-deep); }
.skb-c2 { background: var(--skb-peach); box-shadow: 0 5px 0 var(--skb-peach-deep); }
.skb-c3 { background: var(--skb-mint);  box-shadow: 0 5px 0 var(--skb-mint-deep); }
.skb-c0:hover { background: var(--skb-sky); } .skb-c1:hover { background: var(--skb-lilac); }
.skb-c2:hover { background: var(--skb-peach); } .skb-c3:hover { background: var(--skb-mint); }
.skb-opt:hover { transform: translateY(-2px); color: var(--skb-ink); }
.skb-opt:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(43, 45, 66, .15); }
.skb-opt.is-correct, .skb-opt.is-correct:disabled { background: var(--skb-right); box-shadow: 0 5px 0 var(--skb-right-deep); color: var(--skb-ink); animation: skb-pop .4s ease; }
.skb-opt.is-wrong, .skb-opt:disabled { background: #ece6da; box-shadow: 0 5px 0 #d8d0c0; color: #8f897b; cursor: default; transform: none; }
.skb-opt.is-wrong { text-decoration: line-through; text-decoration-thickness: 2px; }

.skb-dots { display: flex; justify-content: center; gap: 8px; }
.skb-pip { width: 16px; height: 16px; border-radius: 50%; background: #e7dfcf; border: 3px solid transparent; transition: background .2s; }
.skb-pip.is-now { border-color: var(--skb-ink); background: #fff; }
.skb-pip.is-right { background: var(--skb-right-deep); }
.skb-pip.is-miss { background: var(--skb-peach-deep); }
.skb-fact {
  display: flex; flex-direction: column; gap: 10px; padding: 30px 18px; border-radius: 22px;
  background: var(--skb-card); box-shadow: 0 6px 0 var(--skb-line), 0 10px 24px rgba(0, 0, 0, .06);
}
.skb-fact.is-new { animation: skb-flip .45s ease; }
.skb-fact-num { font-size: 17px; font-weight: 800; color: var(--skb-soft); letter-spacing: .04em; }
.skb-fact-text { font-size: clamp(24px, 5.2cqi, 32px); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.skb-qcard { padding: 22px 18px; }
.skb-q-text { font-size: clamp(22px, 4.6cqi, 28px); }
.skb-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skb-tf-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px; cursor: pointer;
  font-size: clamp(27px, 7cqi, 38px); font-weight: 800; color: var(--skb-ink); border: none; border-radius: 20px;
  transition: transform .1s, box-shadow .1s;
}
.skb-tf-btn .skb-emo { font-size: 34px; }
.skb-true { background: var(--skb-right); box-shadow: 0 6px 0 var(--skb-right-deep); }
.skb-false { background: var(--skb-no); box-shadow: 0 6px 0 var(--skb-no-deep); }
.skb-true:hover { background: var(--skb-right); } .skb-false:hover { background: var(--skb-no); }
.skb-tf-btn:hover { transform: translateY(-2px); color: var(--skb-ink); }
.skb-tf-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(43, 45, 66, .15); }
.skb-tf-btn:disabled { background: #ece6da; box-shadow: 0 6px 0 #d8d0c0; color: #8f897b; cursor: default; transform: none; }
.skb-tf-btn.is-correct:disabled { color: var(--skb-ink); animation: skb-pop .4s ease; }
.skb-true.is-correct:disabled { background: var(--skb-right); box-shadow: 0 6px 0 var(--skb-right-deep); }
.skb-false.is-correct:disabled { background: var(--skb-no); box-shadow: 0 6px 0 var(--skb-no-deep); }
.skb-tf-btn.is-wrong { text-decoration: line-through; text-decoration-thickness: 3px; }
.skb-result { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; text-align: left; border-radius: 18px; border: 3px solid; animation: skb-rise-in .3s ease; }
.skb-result.is-ok { background: var(--skb-right-soft); border-color: var(--skb-right); }
.skb-result.is-no { background: var(--skb-no-soft); border-color: var(--skb-peach); }
.skb-result-head { font-size: 22px; font-weight: 800; }
.skb-result-why { font-size: 19px; font-weight: 600; }

/* ---------- results ---------- */
.skb-done { align-items: center; padding-top: 4px; }
.skb-done > .skb-big { max-width: 640px; }
.skb-bigstars { display: flex; gap: 10px; font-size: 81px; line-height: 1; }
.skb-bigstar { color: #ddd3bf; display: inline-block; }
.skb-bigstar.is-on { color: var(--skb-gold); text-shadow: 0 5px 0 var(--skb-gold-deep); animation: skb-star-in .6s cubic-bezier(.2, .9, .3, 1.4) both; }
.skb-done-title { font-size: 38px; font-weight: 800; line-height: 1.15; }
.skb-done-text { font-size: 20px; font-weight: 600; color: var(--skb-soft); max-width: 52ch; text-wrap: balance; }
.skb-donelinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
.skb-rankup {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--skb-sun); font-size: 20px; font-weight: 800; box-shadow: 0 4px 0 var(--skb-sun-deep);
}
.skb-rankup .skb-emo { font-size: 27px; }
.skb-togo { font-size: 18px; font-weight: 700; color: var(--skb-soft); }
.skb-unlock { padding: 6px 14px; border-radius: 999px; background: var(--skb-lilac); font-size: 18px; font-weight: 800; }
.skb-hero {
  display: flex; align-items: center; gap: 16px; width: 100%; max-width: 640px; padding: 14px 16px; text-align: left;
  background: var(--skb-card); border-radius: 22px; box-shadow: 0 5px 0 var(--skb-line);
}
.skb-medal {
  position: relative; flex: 0 0 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #ffcf4a 55%, #e8a917);
  border: 5px solid #fff; box-shadow: 0 0 0 4px var(--skb-gold), 0 6px 0 4px var(--skb-gold-deep);
}
.skb-medal .skb-emo { font-size: 45px; }
.skb-hero.is-locked .skb-medal { filter: grayscale(1); opacity: .5; }
.skb-hero-text { display: flex; flex-direction: column; min-width: 0; }
.skb-hero-kicker { font-size: 16px; font-weight: 800; color: var(--skb-leaf); letter-spacing: .06em; text-transform: uppercase; }
.skb-hero-name { font-size: 29px; font-weight: 800; line-height: 1.1; }
.skb-hero-sub { font-size: 17px; font-weight: 600; color: var(--skb-soft); }
.skb-summary { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 640px; text-align: left; }
.skb-summary li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 8px 12px;
  background: var(--skb-card); border-radius: 14px; font-size: 17px; font-weight: 600;
}
.skb-sum-mark { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.skb-summary .is-ok .skb-sum-mark { background: var(--skb-right-deep); }
.skb-summary .is-no .skb-sum-mark { background: var(--skb-peach-deep); }
.skb-sum-a { font-weight: 800; color: var(--skb-leaf); }

/* ---------- badges ---------- */
.skb-badges { align-items: stretch; }
.skb-prog { display: flex; flex-direction: column; gap: 6px; }
.skb-prog-text { font-size: 18px; font-weight: 800; }
.skb-prog-track { height: 18px; border-radius: 999px; background: #efe6d4; overflow: hidden; }
.skb-prog-fill { height: 100%; border-radius: 999px; background: var(--skb-sun); box-shadow: inset 0 -4px 0 var(--skb-sun-deep); }
.skb-ladder { display: flex; flex-direction: column-reverse; gap: 8px; }
.skb-rung {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left;
  background: var(--skb-card); border: 3px solid transparent; border-radius: 18px;
}
.skb-rung-icon { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--skb-leaf-soft); }
.skb-rung-icon .skb-emo { font-size: 29px; }
.skb-rung-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.skb-rung-name { font-size: 21px; font-weight: 800; line-height: 1.15; }
.skb-rung-at { font-size: 16px; font-weight: 700; color: var(--skb-soft); }
.skb-rung-you { padding: 2px 10px; border-radius: 999px; background: var(--skb-ink); color: #fff; font-size: 15px; font-weight: 800; }
.skb-rung.is-now { border-color: var(--skb-ink); background: #fffbe8; }
.skb-rung.is-future { background: #f6f0e4; }
.skb-rung.is-future .skb-rung-icon { background: #ebe3d3; }
.skb-rung.is-future .skb-rung-name { color: var(--skb-soft); }

/* ---------- wider screens ---------- */
@container skb (min-width: 600px) {
  .skb-slot.is-filled { display: flex; }
  .skb-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .skb-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skb-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skb-stop-btn { width: min(60%, 620px); }
  .skb-title { font-size: 36px; }
}
@container skb (max-width: 420px) {
  .skb-stop-btn, .skb-stop-r .skb-stop-btn { width: 100%; }
  .skb-stop-r .skb-stop-btn { flex-direction: row; text-align: left; padding: 12px 16px 12px 12px; }
  .skb-stop-bubble { flex-basis: 58px; height: 58px; }
  .skb-stop-bubble .skb-emo { font-size: 32px; }
  .skb-stop-name { font-size: 21px; }
  .skb-tile { font-size: 18px; padding: 8px 10px 8px 8px; gap: 6px; }
  .skb-tile .skb-emo { font-size: 27px; }
  .skb-badge-name { max-width: 140px; }
}

/* ---------- celebration (same as the other games) ---------- */
.skb-party { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 99999; transition: opacity .7s ease; }
.skb-party.is-leaving { opacity: 0; }
.skb-confetti { position: absolute; inset: 0; }
.skb-banner {
  position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; color: #2b2d42; padding: 14px 28px; border-radius: 999px;
  font: 800 clamp(25px, 6vw, 38px)/1.2 "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .15); white-space: nowrap;
  animation: skb-banner-in .8s cubic-bezier(.2, .9, .3, 1.2) .15s both;
}
.skb-balloon { position: absolute; bottom: -150px; animation-name: skb-rise; animation-timing-function: cubic-bezier(.35, .1, .6, 1); animation-fill-mode: both; }
.skb-balloon-body {
  position: relative; width: 56px; height: 70px; background: var(--c); border-radius: 50% 50% 46% 46%;
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .1); animation: skb-sway 2s ease-in-out infinite alternate; transform-origin: 50% 140%;
}
.skb-balloon-body::before { content: ""; position: absolute; top: 12px; left: 13px; width: 10px; height: 16px; background: rgba(255, 255, 255, .6); border-radius: 50%; }
.skb-balloon-body::after { content: ""; position: absolute; top: 70px; left: 27px; width: 2px; height: 60px; background: rgba(0, 0, 0, .25); }

.skb-game .is-shake { animation: skb-shake .4s ease; }
@keyframes skb-flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes skb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes skb-nope { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 73, 90, 0); } 30% { box-shadow: 0 0 0 5px rgba(196, 73, 90, .55); } }
@keyframes skb-glow { 0% { box-shadow: 0 0 0 0 rgba(92, 194, 123, .9); } 100% { box-shadow: 0 0 0 16px rgba(92, 194, 123, 0); } }
@keyframes skb-pulse { 50% { transform: scale(1.04); } }
@keyframes skb-pop { 50% { transform: scale(1.1); } }
@keyframes skb-rise-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes skb-star-in { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@keyframes skb-rise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(calc(-100vh - 260px)); opacity: 1; } }
@keyframes skb-sway { from { transform: rotate(-7deg) translateX(-6px); } to { transform: rotate(7deg) translateX(6px); } }
@keyframes skb-banner-in { from { transform: translate(-50%, -40%) scale(.85); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .skb-game *, .skb-game *::before, .skb-game *::after { animation: none !important; transition: none !important; }
  .skb-banner { animation-duration: .01s; }
}

/* ================= Body City additions ================= */
.skb-mini { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: middle; }
.skb-sys {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px;
  font-size: 16px; font-weight: 800; line-height: 1.3; white-space: nowrap; background: #fff; color: var(--skb-ink);
}
.skb-sys .skb-emo { font-size: 18px; }
.skb-sys-circ { background: #ffdfe2; } .skb-sys-resp { background: #ffe3ec; } .skb-sys-dig { background: #ffe6cf; }
.skb-sys-uri { background: #fff0b8; } .skb-sys-nerv { background: #ece0ff; } .skb-sys-skel { background: #efe7cf; }
.skb-sys-musc { background: #ffd4d8; }

/* job card pop-up */
.skb-pop {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; text-align: left;
  background: var(--skb-card); border-radius: 18px; box-shadow: 0 5px 0 var(--skb-line);
}
.skb-pop.is-in { animation: skb-rise-in .35s ease; }

/* district intro + build board */
.skb-intro { padding: 10px 14px; text-align: left; background: var(--skb-card); border-radius: 18px; box-shadow: 0 4px 0 var(--skb-line); }
.skb-nick { font-size: 19px; font-weight: 800; color: var(--skb-leaf); }
.skb-intro-text { font-size: 18px; font-weight: 600; color: var(--skb-soft); }
.skb-buildboard { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.skb-bodyfig { padding: 6px; background: var(--skb-card); border-radius: 18px; box-shadow: 0 4px 0 var(--skb-line); }
.skb-bodysvg { display: block; width: 100%; height: auto; max-height: 480px; margin: 0 auto; touch-action: manipulation; }
.skb-leader { stroke: #8f9bb4; stroke-width: 1.2; stroke-dasharray: 2 2; }
.skb-mk { cursor: pointer; outline: none; }
.skb-mk-hit { fill: transparent; }
.skb-mk-dot { fill: #fff; stroke: var(--skb-ink); stroke-width: 2.5; transition: fill .15s; }
.skb-mk-num { font: 800 15px "Baloo 2", system-ui, sans-serif; fill: var(--skb-ink); pointer-events: none; }
.skb-mk:hover .skb-mk-dot, .skb-mk.is-over .skb-mk-dot { fill: var(--skb-sun); }
.skb-mk:focus-visible .skb-mk-dot { stroke: #3a5bd9; stroke-width: 4; }
.skb-mk.is-nope .skb-mk-dot { animation: skb-mknope .6s ease; }
.skb-mk.is-done { cursor: default; }
.skb-buildside { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; }
.skb-partpool { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.skb-parttile { width: 100%; font-size: 19px; padding: 9px 12px 9px 10px; }
.skb-tile-dot { flex: 0 0 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(43, 45, 66, .25); }
.skb-tile-name { min-width: 0; overflow-wrap: anywhere; }
.skb-buildmsg { font-size: 19px; text-align: left; }
.skb-review { display: flex; flex-direction: column; gap: 6px; }
.skb-review li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--skb-card); font-size: 17px; font-weight: 800; }
.skb-jobcard { align-items: flex-start; }
.skb-pop-dot { flex: 0 0 18px; height: 18px; margin-top: 5px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(43, 45, 66, .25); }
.skb-pop-text { display: flex; flex-direction: column; gap: 3px; font-size: 19px; font-weight: 600; }
.skb-pop-name { font-size: 22px; font-weight: 800; }
.skb-without { color: var(--skb-soft); }
.skb-teams { display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: left; background: var(--skb-card); border-radius: 20px; box-shadow: 0 5px 0 var(--skb-line); }
.skb-teamlist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 10px; align-items: start; }
.skb-teamlist li { display: contents; font-size: 18px; font-weight: 600; }
.skb-teamlist li > span:last-child { font-size: 18px; font-weight: 600; padding-top: 1px; }
.skb-teams-sub { margin: 0; text-align: left; font-size: 17px; }

/* delivery route */
.skb-routelay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.skb-route { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; background: var(--skb-card); border-radius: 20px; box-shadow: 0 4px 0 var(--skb-line); }
.skb-route-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.skb-route-lines line { stroke: #eadfca; stroke-width: 7; stroke-linecap: round; }
.skb-rnode {
  position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: auto; padding: 0; cursor: pointer; background: none; border: none; z-index: 1;
}
.skb-rnode:hover { background: none; color: var(--skb-ink); }
.skb-rnode-c { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--skb-dash); transition: border-color .15s, box-shadow .2s; }
.skb-rnode-c .skb-emo { font-size: 30px; }
.skb-rnode-c .skb-mini { width: 32px; height: 32px; }
.skb-rnode-name { position: absolute; top: 100%; left: 50%; translate: -50% 1px; width: max-content; max-width: 92px; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.1; padding: 1px 5px; border-radius: 8px; background: rgba(255, 255, 255, .92); }
.skb-route.is-asking .skb-rnode:hover .skb-rnode-c { border-color: var(--skb-ink); }
.skb-rnode.is-here .skb-rnode-c { border-color: #e63946; box-shadow: 0 0 0 4px #ffd6da; }
.skb-rnode.is-glow .skb-rnode-c { animation: skb-glow .9s ease; }
.skb-cell {
  position: absolute; z-index: 2; width: 26px; height: 26px; margin: -38px 0 0 14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #b51d2b 0 4px, #e63946 5px); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(43, 45, 66, .3);
  transition: left .9s ease-in-out, top .9s ease-in-out;
}
.skb-cell.is-jump { transition: none; }
.skb-cell-tag { position: absolute; left: 100%; top: -4px; margin-left: 3px; padding: 0 5px; border-radius: 8px; background: var(--skb-sun); font-size: 14px; font-weight: 800; white-space: nowrap; }
.skb-routeside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.skb-cargo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--skb-card); border-radius: 18px; box-shadow: 0 4px 0 var(--skb-line); }
.skb-cargo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.skb-cargo-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #f1ebe0; color: #9a927f; font-size: 16px; font-weight: 700; text-decoration: line-through; transition: background .3s; }
.skb-cargo-item.is-on { background: var(--skb-sun); color: var(--skb-ink); font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 var(--skb-sun-deep); }
.skb-cargo-ic { font-weight: 800; font-family: var(--skb-emoji), inherit; }

/* signal relay */
.skb-rslots { display: flex; flex-direction: column; gap: 8px; }
.skb-rslot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 50px; padding: 7px 12px 7px 8px; text-align: left;
  background: rgba(255, 255, 255, .55); border: 3px dashed var(--skb-dash); border-radius: 16px; transition: background .2s, box-shadow .3s;
}
.skb-rslot-num { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--skb-dash); color: #fff; font-size: 18px; font-weight: 800; }
.skb-rslot-text { flex: 1 1 160px; min-width: 0; font-size: 18px; font-weight: 700; }
.skb-rslot.is-filled { background: var(--skb-right-soft); border: 3px solid var(--skb-right-deep); }
.skb-rslot.is-filled .skb-rslot-num { background: var(--skb-right-deep); }
.skb-rslot.is-over { border-color: var(--skb-ink); border-style: solid; background: #fffbe8; }
.skb-rslot.is-glow { animation: skb-glow .9s ease; }
.skb-rslot.is-lit { box-shadow: 0 0 0 4px var(--skb-sun); }
.skb-rpool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.skb-rcard { width: 100%; font-size: 18px; line-height: 1.25; padding: 10px 14px; }
.skb-relaymod .skb-h3 .skb-emo { font-size: 29px; vertical-align: -3px; }
.skb-recycle {
  display: flex; align-items: center; gap: 10px; max-width: 62ch; margin: 0 auto; padding: 10px 14px; text-align: left;
  font-size: 18px; font-weight: 600; background: var(--skb-card); border: 2px dashed var(--skb-right-deep); border-radius: 16px;
}
.skb-recycle .skb-emo { font-size: 29px; }

/* who needs whom */
.skb-weblay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.skb-webbox { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1 / 1; background: var(--skb-card); border-radius: 50%; box-shadow: 0 4px 0 var(--skb-line); }
.skb-weblines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.skb-warrow { fill: none; stroke: #9a927f; stroke-width: .7; }
.skb-warrow.is-new { stroke: var(--skb-sun-deep); stroke-width: 1.2; }
.skb-wa { fill: #9a927f; } .skb-wa-new { fill: var(--skb-sun-deep); }
.skb-wlabel { font-family: "Baloo 2", system-ui, sans-serif; font-size: 3px; font-weight: 800; fill: #6c6656; paint-order: stroke; stroke: #fff; stroke-width: .9px; stroke-linejoin: round; }
.skb-wlabel { display: none; }
.skb-wlabel.is-new { display: inline; fill: var(--skb-ink); font-size: 4px; }
.skb-weblist { display: flex; flex-direction: column; gap: 6px; }
.skb-weblist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 16px; font-weight: 700; }
.skb-weblist-what { color: var(--skb-soft); }
.skb-wnode { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 1px; width: auto; padding: 0; cursor: pointer; background: none; border: none; z-index: 1; }
.skb-wnode:hover { background: none; color: var(--skb-ink); }
.skb-wnode-c { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(43, 45, 66, .15); transition: box-shadow .2s, border-color .15s; }
.skb-wnode-c .skb-emo { font-size: 28px; }
.skb-wnode-name { position: absolute; top: 100%; left: 50%; translate: -50% 1px; width: max-content; text-align: center; font-size: 14px; font-weight: 800; line-height: 1.1; padding: 1px 5px; border-radius: 8px; background: rgba(255, 255, 255, .92); }
.skb-wnode-circ .skb-wnode-c { background: #ffdfe2; } .skb-wnode-resp .skb-wnode-c { background: #ffe3ec; } .skb-wnode-dig .skb-wnode-c { background: #ffe6cf; }
.skb-wnode-uri .skb-wnode-c { background: #fff0b8; } .skb-wnode-nerv .skb-wnode-c { background: #ece0ff; } .skb-wnode-skel .skb-wnode-c { background: #efe7cf; }
.skb-wnode-musc .skb-wnode-c { background: #ffd4d8; }
.skb-webbox.is-asking .skb-wnode:hover .skb-wnode-c { border-color: var(--skb-ink); }
.skb-wnode.is-giver .skb-wnode-c { border-color: var(--skb-ink); box-shadow: 0 0 0 5px var(--skb-sun); }
.skb-wnode.is-recv .skb-wnode-c { border-color: var(--skb-ink); box-shadow: 0 0 0 5px var(--skb-right-deep); }
.skb-webside { text-align: left; }
.skb-webwhat { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 999px; background: #fffbe8; border: 2px solid var(--skb-sun); font-size: 18px; font-weight: 800; }
.skb-webstatus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; color: var(--skb-soft); }
.skb-webq { display: inline-grid; place-items: center; min-width: 26px; height: 24px; border-radius: 999px; background: #efe8da; font-weight: 800; color: var(--skb-ink); }
.skb-webarrow { font-weight: 800; }
.skb-result-head .skb-sys { vertical-align: 1px; }

/* body breakdown lab */
.skb-labmod .skb-h3 .skb-emo { font-size: 29px; vertical-align: -3px; }
.skb-labtask { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.skb-meters { display: flex; flex-direction: column; gap: 9px; padding: 12px; background: var(--skb-card); border-radius: 18px; box-shadow: 0 4px 0 var(--skb-line); text-align: left; }
.skb-meter { display: grid; grid-template-columns: 124px minmax(0, 1fr) 78px; align-items: center; gap: 8px; }
.skb-meter-label { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; line-height: 1.1; min-width: 0; }
.skb-meter-label .skb-emo { font-size: 21px; }
.skb-meter-track { position: relative; height: 18px; border-radius: 999px; background: #efe6d4; overflow: hidden; }
.skb-meter-band { position: absolute; top: 0; bottom: 0; background: rgba(92, 194, 123, .3); }
.skb-meter-fill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--skb-right-deep); transition: width .9s ease, background .4s; }
.skb-meter-fill.is-off { background: var(--skb-peach-deep); }
.skb-meter-fill.is-neutral { background: #5aa9e6; }
.skb-meter:has(.is-neutral) .skb-meter-band { background: rgba(90, 169, 230, .22); }
.skb-meter-word { font-size: 16px; font-weight: 800; text-align: right; white-space: nowrap; }
.skb-meter-key { font-size: 15px; font-weight: 700; color: var(--skb-soft); text-align: center; }
.skb-season { min-height: 3.2em; padding: 10px 14px; font-size: 19px; font-weight: 700; text-align: left; background: #fffbe8; border: 2px solid var(--skb-sun); border-radius: 16px; display: flex; flex-direction: column; gap: 2px; }
.skb-season-num { font-size: 15px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--skb-sun-deep); font-variant-numeric: tabular-nums; }
.skb-season.is-new .skb-season-text { animation: skb-rise-in .4s ease; }

/* body detective */
.skb-case { display: flex; align-items: flex-start; gap: 12px; padding: 14px; text-align: left; background: var(--skb-card); border-radius: 22px; box-shadow: 0 5px 0 var(--skb-line); }
.skb-case.is-in { animation: skb-rise-in .35s ease; }
.skb-case-who { flex: 0 0 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--skb-leaf-soft); }
.skb-case-who .skb-emo { font-size: 38px; }
.skb-case-bubble { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skb-case-says { font-size: clamp(20px, 4.4cqi, 25px); font-weight: 800; line-height: 1.3; }
.skb-sysgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.skb-sysbtn {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; text-align: left;
  font-size: 18px; font-weight: 800; color: var(--skb-ink); background: #fff; border: 3px solid var(--skb-line); border-radius: 16px;
  transition: transform .1s, border-color .15s;
}
.skb-sysbtn .skb-emo { font-size: 27px; }
.skb-sysbtn:hover { transform: translateY(-2px); background: #fff; color: var(--skb-ink); border-color: var(--skb-ink); }
.skb-sysbtn:disabled { cursor: default; transform: none; color: #8f897b; background: #f4efe5; border-color: #e7dfcf; }
.skb-sysbtn.is-correct, .skb-sysbtn.is-correct:disabled { background: var(--skb-right); border-color: var(--skb-right-deep); color: var(--skb-ink); animation: skb-pop .4s ease; }
.skb-sysbtn.is-wrong { text-decoration: line-through; text-decoration-thickness: 2px; }

.skb-ask .skb-cont { margin-top: 2px; }
.skb-ask .skb-result { animation: skb-rise-in .3s ease; }

@keyframes skb-mknope { 0%, 100% { fill: #fff; } 40% { fill: #ffc2c7; } }

@container skb (min-width: 600px) {
  .skb-routelay { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .skb-weblay { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .skb-rpool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skb-sysgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .skb-sysgrid .skb-sysbtn { flex-direction: column; text-align: center; gap: 2px; }
  .skb-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@container skb (max-width: 420px) {
  .skb-parttile { font-size: 17px; padding: 8px 8px 8px 8px; gap: 6px; }
  .skb-tile-dot { flex-basis: 12px; height: 12px; }
  .skb-buildboard { gap: 8px; }
  .skb-buildmsg { font-size: 17px; }
  .skb-rnode-name { max-width: 76px; }
  .skb-rnode-c { width: 46px; height: 46px; }
  .skb-rnode-c .skb-emo { font-size: 26px; }
  .skb-rnode-c .skb-mini { width: 27px; height: 27px; }
  .skb-rnode-name { font-size: 13px; }
  .skb-cell { width: 22px; height: 22px; margin: -32px 0 0 10px; }
  .skb-wnode-c { width: 42px; height: 42px; }
  .skb-wnode-c .skb-emo { font-size: 24px; }
  .skb-wnode-name { font-size: 12px; }
  .skb-meter { grid-template-columns: 100px minmax(0, 1fr) 66px; gap: 6px; }
  .skb-meter-label { font-size: 15px; }
  .skb-meter-word { font-size: 14px; }
  .skb-case-who { flex-basis: 52px; height: 52px; }
  .skb-sysbtn { font-size: 17px; padding: 8px 10px; }
}

/* ================= Build-a-System with pictures (v1.1) ================= */
.skb-buildboard { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.skb-buildside {
  position: sticky; top: 0; z-index: 4; padding: 8px 0 6px; background: var(--skb-bg);
  box-shadow: 0 8px 8px -8px rgba(43, 45, 66, .18);
}
.skb-buildboard.is-built .skb-buildside { position: static; box-shadow: none; }
.skb-partpool { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.skb-parttile { width: auto; font-size: 17px; padding: 6px 12px 6px 8px; box-shadow: 0 3px 0 var(--skb-line); }
.skb-buildmsg { min-height: 1.4em; font-size: 18px; text-align: center; }
.skb-bodyfig { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 4px; }
.skb-bodysvg { max-height: none; }
.skb-leader { stroke: var(--skb-ink); stroke-width: 4; stroke-dasharray: none; opacity: .7; transition: stroke .2s, opacity .2s; }
.skb-tdot { fill: var(--skb-sun); stroke: var(--skb-ink); stroke-width: 5; transition: fill .2s, r .2s; }
.skb-leader.is-hot { stroke: #3a5bd9; opacity: 1; stroke-width: 6; }
.skb-tdot.is-hot { fill: #3a5bd9; }
.skb-leader.is-done { stroke: var(--skb-right-deep); opacity: .9; }
.skb-tdot.is-done { fill: var(--skb-right-deep); stroke: #fff; }
.skb-lens-bg { fill: #fff; }
.skb-lens-ring { fill: none; stroke: var(--skb-ink); stroke-width: 9; }
.skb-mk-dot { fill: #fff; stroke: var(--skb-ink); stroke-width: 7; }
.skb-mk-num { font: 800 47px "Baloo 2", system-ui, sans-serif; }
.skb-mk:focus-visible .skb-mk-dot { stroke: #3a5bd9; stroke-width: 11; }
.skb-mk.is-done .skb-mk-dot { fill: var(--skb-right-deep); stroke: #fff; stroke-width: 7; }
.skb-mk.is-done .skb-mk-num { fill: #fff; }
.skb-mk.is-glow .skb-mk-dot { animation: skb-mkglow .7s ease; }
@keyframes skb-mkglow { 40% { stroke: var(--skb-sun); stroke-width: 22; } }
/* phones: the job card pops up at the bottom of the screen, wherever the picture is scrolled */
.skb-jobcard {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: 520px; margin: 0 auto; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 10px 28px rgba(43, 45, 66, .3), 0 0 0 3px var(--skb-right);
}
.skb-pop-ok {
  align-self: flex-end; margin-top: 4px; padding: 6px 16px; cursor: pointer; font-size: 18px; font-weight: 800;
  color: var(--skb-ink); background: var(--skb-sun); border: none; border-radius: 999px; box-shadow: 0 3px 0 var(--skb-sun-deep);
}
.skb-pop-ok:hover { background: var(--skb-sun); color: var(--skb-ink); }
.skb-review { flex-direction: row; flex-wrap: wrap; justify-content: center; }
@container skb (min-width: 600px) {
  .skb-buildboard { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 14px; }
  .skb-bodyfig { order: -1; }
  .skb-buildside { top: 8px; padding: 0; box-shadow: none; text-align: left; }
  .skb-partpool { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .skb-parttile { width: 100%; font-size: 19px; padding: 9px 12px 9px 10px; }
  .skb-buildmsg { text-align: left; }
  .skb-review { flex-direction: column; }
  .skb-jobcard { position: static; max-height: none; box-shadow: 0 5px 0 var(--skb-line), 0 0 0 3px var(--skb-right); }
}
@container skb (max-width: 420px) {
  .skb-parttile { font-size: 16px; padding: 5px 10px 5px 7px; }
  .skb-pop-text { font-size: 17px; }
  .skb-pop-name { font-size: 20px; }
}
.skb-bodysvg > g { opacity: 0; transition: opacity .3s ease; }
.skb-bodysvg.is-ready > g { opacity: 1; }

/* v1.2.0 — Science Discovery Path: members-only stops, gold Expert badge */
.skb-stop-btn.is-members .skb-lock { color: #2f8f4f; }
.skb-stop-btn.is-members { cursor: pointer; }
.skb-hero.is-gold { background: linear-gradient(135deg, #fff8d6, #ffe7a0); box-shadow: 0 5px 0 #e8c25a; }
.skb-hero.is-gold .skb-medal { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd34d 50%, #c98a00); box-shadow: 0 0 0 4px #c98a00, 0 6px 0 4px #8a5d00; }
.skb-hero.is-gold.is-locked { background: var(--skb-card); box-shadow: 0 5px 0 var(--skb-line); }
.skb-hero + .skb-hero { margin-top: 10px; }
.skb-game .skd-member.is-shake { animation: skb-shake .4s; }

/* v1.2.1 — full content width (like the Growth Path); question screens kept to a comfortable reading width. */
.skb-badges, .skb-done { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
@container skb (min-width: 900px) {
  .skb-modbody > .skb-mod { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
}