/* Look B, "Bright cards" (Doug, Nov 3, 2026: "b, site wide for all games menus and characters"; ADR-047). Shared by
   the arcade home and every game in the new look (body.look-b). Mockups: https://claude.ai/artifact/EGoRzCeHvSaSWDjqufZjHa
   Saturated cards with a colored shadow, white panels for pictures and numbers, Posty's talking bubble with a speaker,
   a round's dots as one bar, and a white All done card on still sun rays. No pink or purple except Posty himself.
   Still by design (rules 1 and 2): nothing here moves by itself; a press sinks a card 4px and that's all. */
.look-b {
  --b-cream: #fff7e8;
  --b-ink: #33261b;
  --b-yellow: #ffd45c;
  --b-yellow-dark: #c79a1e;
  --b-field: #1f5fbf;
  --b-field-dark: #143f80;
  --b-field-soft: #2a6dd0;
  --b-speaker: #1f5fbf;
}
/* One color set per card, tab or field: the card, its shadow, its lighter blob. */
.look-b [data-c='blue'] { --c: #1f5fbf; --c-dark: #143f80; --c-light: #2f74d6; --c-tint: #dbe7fb; }
.look-b [data-c='orange'] { --c: #d9721f; --c-dark: #9a4f12; --c-light: #e88a3c; --c-tint: #fbe4cf; }
.look-b [data-c='teal'] { --c: #1f8a84; --c-dark: #135c58; --c-light: #2fa59e; --c-tint: #d3efec; }
.look-b [data-c='green'] { --c: #2e7d3a; --c-dark: #1d5426; --c-light: #3c9549; --c-tint: #d9f0d2; }
.look-b [data-c='red'] { --c: #d4462c; --c-dark: #962e1a; --c-light: #e2604a; --c-tint: #fde3d6; }
.look-b [data-c='gold'] { --c: #b88a0c; --c-dark: #7d5d06; --c-light: #cfa020; --c-tint: #f7ebc6; }

/* ---------- Posty and his talking bubble (every page in the look) ---------- */
.look-b .b-posty { display: block; flex: none; width: 56px; }
.look-b .b-posty svg { display: block; width: 100%; height: auto; }
.look-b .b-bubble {
  min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-align: left;
  background: #fff; color: var(--b-ink); border: 3px solid var(--b-ink); border-radius: 22px 22px 22px 6px;
  font: 600 20px/1.15 'Fredoka', system-ui, sans-serif;
}
.look-b .b-bubble .b-say { flex: 1; min-width: 0; }
.look-b .b-speaker { flex: none; color: var(--b-speaker); }
.look-b .b-bubble:active { transform: translateY(2px); }
.look-b .b-bubble:focus-visible { outline: 4px solid var(--b-speaker); outline-offset: 3px; }
.look-b .b-top { display: flex; gap: 10px; align-items: center; }
.look-b .b-top .b-bubble { flex: 1 1 auto; }
@media (max-width: 420px) { .look-b .b-top .b-bubble { font-size: 18px; padding: 6px 10px; gap: 6px; } .look-b .b-top .b-posty { width: 48px; } }
@media (min-width: 900px) {
  .look-b .b-top { max-width: 1600px; margin: 0 auto; width: 100%; }
  .look-b .b-top .b-posty { width: 72px; }
  .look-b .b-top .b-bubble { flex: 0 1 auto; margin-right: auto; font-size: 24px; padding: 10px 20px; }
}
/* The Child lock in the look: dark, never navy-violet; open it is the arcade's yellow. */
.look-b .lock-btn[aria-pressed='true'] { background: var(--b-ink); border-color: #fff; color: #fff; box-shadow: 0 4px 0 #0006; }
.look-b .lock-btn[aria-pressed='false'] { background: var(--b-yellow); color: var(--b-ink); }

/* ---------- Home: picture tabs, Keep playing, bright cards ---------- */
.look-b { background: var(--b-cream); }
.look-b .hero h1 { font-size: clamp(24px, 6vw, 34px); }
.look-b .hero .kicker { font-size: 16px; }
.look-b .hero .lede { font-size: 18px; }
/* Four equal tabs (Doug's equal-rows rule), each a picture: 123, Aa, a pencil, a smile. */
.look-b .kind-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.look-b .kind-tab {
  min-height: 64px; border: 0; border-radius: 18px; display: grid; place-items: center;
  background: var(--c-tint); color: var(--c-dark); font: 700 26px/1 'Fredoka', system-ui, sans-serif;
}
.look-b .kind-tab[aria-pressed='true'] { background: var(--c); color: #fff; box-shadow: 0 5px 0 var(--c-dark); }
.look-b .kind-tab:active { transform: translateY(3px); }
.look-b .kind-tab:focus-visible { outline: 4px solid var(--b-ink); outline-offset: 3px; }
@media (min-width: 900px) { .look-b .kind-tabs { gap: 14px; } .look-b .kind-tab { min-height: 76px; font-size: 32px; } .look-b .kind-tab svg { width: 38px; height: 38px; } }
/* Keep playing: the last game played, one big card. */
.look-b .keep-playing {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 28px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 92% 0%, var(--c-light) 0 34%, transparent 34.4%), var(--c); box-shadow: 0 7px 0 var(--c-dark);
}
.look-b .keep-playing[hidden] { display: none; }
.look-b .keep-playing:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--c-dark); }
.look-b .keep-playing:focus-visible { outline: 5px solid var(--b-ink); outline-offset: 3px; }
.look-b .kp-art { display: block; background: #fff; border-radius: 20px; padding: 6px; }
.look-b .kp-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.look-b .kp-words { display: grid; gap: 2px; min-width: 0; }
.look-b .kp-k { font-weight: 600; font-size: 16px; opacity: .9; }
.look-b .kp-n { font-weight: 700; font-size: 26px; line-height: 1.1; text-wrap: balance; }
.look-b .kp-go { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--b-yellow); color: var(--b-ink); box-shadow: 0 4px 0 var(--b-yellow-dark); }
@media (min-width: 900px) {
  .look-b .keep-playing { grid-template-columns: 132px minmax(0, 1fr) 84px; padding: 18px 24px; }
  .look-b .kp-n { font-size: 36px; } .look-b .kp-k { font-size: 20px; }
  .look-b .kp-go { width: 84px; height: 84px; } .look-b .kp-go svg { width: 38px; height: 38px; }
}
/* One kind's cards at a time (look-b.js); with no script every kind shows. */
.look-b .kinds { display: grid; gap: 22px; }
.look-b .kinds > .tiles[hidden] { display: none; }
.look-b .tile-card {
  border: 0; border-radius: 26px; padding: 10px 10px 12px; gap: 6px; color: #fff;
  background: radial-gradient(circle at 92% 2%, var(--c-light) 0 36%, transparent 36.4%), var(--c); box-shadow: 0 6px 0 var(--c-dark);
}
.look-b .tile-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c-dark); }
.look-b .tile-card:focus-visible { outline: 5px solid var(--b-ink); outline-offset: 3px; }
.look-b .tile-card img { background: #fff; border-radius: 18px; padding: 6px; }
.look-b .tile-card .n { color: #fff; text-shadow: 0 2px 0 #0003; }
@media (min-width: 1200px) { .look-b .tile-card { border-width: 0; padding: 14px 14px 16px; border-radius: 30px; } }
/* Grown-up boxes keep their shape, on white so they sit quietly under the bright cards. */
.look-b .more-box, .look-b .games-info { background: #fff; }

/* ---------- Games: the bright field, the round's progress bar, buttons ---------- */
/* A strong blue field with a few soft, still circles (Counting to 20 and every game in the look). */
.look-b.b-field {
  background-color: var(--b-field);
  background-image:
    radial-gradient(circle at 8% 18%, var(--b-field-soft) 0 90px, transparent 91px),
    radial-gradient(circle at 92% 72%, var(--b-field-soft) 0 140px, transparent 141px),
    radial-gradient(circle at 70% 4%, var(--b-field-soft) 0 60px, transparent 61px);
  background-attachment: fixed;
}
/* The evening look (after 6 PM, or as a grown-up sets it): a deeper, quieter blue. */
.look-b.b-field.evening { --b-field: #17488f; --b-field-dark: #0f3166; --b-field-soft: #1e559f; }
.look-b.b-field .round { border: 0; background: #fff; color: var(--b-field); box-shadow: 0 4px 0 var(--b-field-dark); }
.look-b.b-field .round.back { background: var(--b-yellow); color: var(--b-ink); box-shadow: 0 4px 0 var(--b-yellow-dark); }
/* A game in light colors moved onto the field: words right on the field read white, its picture and the grown-up
   boxes sit on white panels, and its own cards keep their ink. */
.look-b.b-field .hero h1 { color: #fff; text-shadow: 0 3px 0 var(--b-field-dark); }
.look-b.b-field .hero .hero-art { background: #fff; border: 0; border-radius: 32px; box-shadow: 0 8px 0 var(--b-field-dark); }
.look-b.b-field .hero .lede { color: #e6eefb; }
.look-b.b-field .grownups, .look-b.b-field .about { background: #fff; color: var(--b-ink); border: 0; box-shadow: 0 6px 0 var(--b-field-dark); }
.look-b.b-field .grownups a, .look-b.b-field .about a { color: var(--b-field); }
.look-b.b-field .talk { background: #fff; color: var(--b-ink); border: 0; box-shadow: 0 4px 0 var(--b-field-dark); }
/* What the game just said, as Posty's talking bubble: white, dark words, readable on the field. */
.look-b.b-field .said:not(:empty) {
  padding: 6px 14px; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--b-ink); box-shadow: 0 4px 0 var(--b-field-dark);
}
.look-b.b-field .said-row .hear { border: 0; background: #fff; color: var(--b-field); box-shadow: 0 4px 0 var(--b-field-dark); }
.look-b .b-done .cheer { color: var(--b-field); text-shadow: none; }
.look-b .b-done .lede { color: #5a4a3a; }
.look-b.b-field #finish { justify-items: center; }
.look-b.b-field #finish > .talk, .look-b.b-field #finish > .big { width: min(100%, 560px); }
/* A round's dots as one bar: parts done are yellow, the one now is yellow with a white edge (rule 9). */
.look-b .dots { width: min(100%, 460px); justify-self: center; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--b-field-dark); }
.look-b .dots li { flex: 1; height: 14px; width: auto; border-radius: 7px; border: 0; background: var(--b-field-soft); }
.look-b .dots li.done { background: var(--b-yellow); }
.look-b .dots li.now { background: var(--b-yellow); box-shadow: 0 0 0 3px #fff; }
/* The main button is the arcade's yellow; a quiet one is white. */
.look-b .big { border: 0; }
.look-b .big.go { background: var(--b-yellow); color: var(--b-ink); text-shadow: none; box-shadow: 0 7px 0 var(--b-yellow-dark); }
.look-b .big.go:active { box-shadow: 0 2px 0 var(--b-yellow-dark); }
.look-b .big.plain { background: #fff; color: var(--b-ink); box-shadow: 0 6px 0 var(--b-field-dark); }

/* ---------- The All done card: white, on still sun rays, Posty cheering ---------- */
.look-b .b-done {
  position: relative; isolation: isolate; width: min(100%, 560px); display: grid; justify-items: center; gap: 8px;
  padding: 20px 18px 22px; border-radius: 32px; background: #fff; color: var(--b-ink); box-shadow: 0 8px 0 var(--b-field-dark);
}
.look-b .b-done::before {
  content: ''; position: absolute; z-index: -1; inset: -60px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #ffd45c55 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%);
}
.look-b .b-done .b-cheer { position: absolute; left: -8px; bottom: -18px; width: 104px; }
@media (max-width: 520px) { .look-b .b-done .b-cheer { width: 70px; left: -6px; } }