/* The front page (src/site/pages/home.ts), loaded on that page only: the slim "Make a game with Claude" bar (.mkb,
   src/site/components/makeGame.ts + public/static/js/makegame.js) and the game wall (.wall). Builds on the retro.css
   tokens and reuses the Make-a-game pieces in workshop.css (.mk-caret, .mk-idea chips, .mk-cc, .mk-fine) and the
   "your game here" cabinets (.tile-slot). The categories panel and the jam duo below keep their retro.css and
   workshop.css styles.
   Sections: maker bar · wall head · wall grid (container queries) · tiles · big tile · cabinets · welcome and foot ·
   phones · motion and contrast. */

/* ── Make a game with Claude: the slim bar ─────────────────────────────────── */

.mkb {
  position: relative;
  isolation: isolate;
  padding: 3px;
  border-radius: 18px;
  background: linear-gradient(90deg, #ff4fd8, #ffd400 25%, #3ff5c4 50%, #4f8bff 75%, #b04fff);
  box-shadow: 0 0 0 3px var(--rr-navy), 0 7px 0 rgba(20, 32, 107, 0.28);
  --focus: #ffd400;
}
.mkb.is-zapped { animation: mkb-zap 0.45s ease-out; }
@keyframes mkb-zap { 30% { box-shadow: 0 0 0 3px var(--rr-navy), 0 7px 0 rgba(20, 32, 107, 0.28), 0 0 44px rgba(255, 212, 0, 0.75); } }

.mkb-form {
  position: relative;
  margin: 0;
  padding: 7px 10px 7px 14px;
  border-radius: 15px;
  color: #fff;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(70% 140% at 0% 0%, rgba(255, 79, 216, 0.28), transparent 70%),
    linear-gradient(100deg, #2b3fd8 0%, #16217e 45%, #0a0f44 100%);
}
.mkb-row { display: flex; align-items: center; gap: 12px; }

.mkb-label { flex: none; display: flex; align-items: center; gap: 10px; cursor: text; }
.mkb-new {
  flex: none;
  padding: 4px 6px;
  border: 2px solid #3ff5c4;
  border-radius: 6px;
  color: #3ff5c4;
  font: 8px/1 var(--font-arcade);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(63, 245, 196, 0.6);
}
.mkb-label-text { max-width: 12.5em; color: #ffd400; font: 10px/1.45 var(--font-arcade); text-shadow: 0 2px 0 #0a1150; }
.mkb-claude { color: #ffb27a; }

.mkb-field { position: relative; flex: 1 1 auto; min-width: 0; }
.mkb .mk-caret { left: 13px; top: 9px; font-size: 16px; }
.mkb-prompt {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 10px 14px 10px 32px;
  border: 2px solid #7f93ff;
  border-radius: 12px;
  background: rgba(4, 7, 36, 0.82);
  color: #effff6;
  caret-color: #3ff5c4;
  font: 16px/1.25 var(--font-mono);
  resize: none;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(127, 147, 255, 0.25), 0 0 18px rgba(79, 139, 255, 0.3);
  transition: height 0.26s var(--ease-out), border-color 0.15s, box-shadow 0.15s;
}
/* Folded, the bar is one line: the placeholder never wraps out of sight, it fades off the right edge. */
.mkb:not(.is-open) .mkb-prompt { white-space: nowrap; }
.mkb-field::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 28px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(5, 8, 38, 0), rgba(5, 8, 38, 0.95));
  pointer-events: none;
}
.mkb.is-open .mkb-field::after, .mkb:focus-within .mkb-field::after { display: none; }
.mkb-prompt::placeholder { color: #9aa7e6; opacity: 1; }
.mkb-prompt:hover { border-color: #b2bfff; }
.mkb-prompt:focus-visible { border-color: #ffd400; outline: 3px solid rgba(255, 212, 0, 0.55); outline-offset: 1px; box-shadow: 0 0 24px rgba(255, 212, 0, 0.35); }

.mkb-go {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font: 12px/1 var(--font-arcade);
  text-transform: uppercase;
  box-shadow: 0 4px 0 #0a1150, inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 0 18px rgba(255, 212, 0, 0.35);
}
.mkb-go.is-busy { cursor: progress; }
.mkb-go .mkb-spark { display: none; }

/* The part that opens: grid rows 0fr -> 1fr animates its height; folded it is hidden and (with JS) inert. */
.mkb-more {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.28s var(--ease-out), visibility 0s linear 0.28s;
}
.mkb-clip { min-height: 0; overflow: hidden; }
.mkb-body { display: grid; gap: 12px; padding: 14px 4px 6px; }

/* Open: with JS the .is-open class; without JS while focus is inside (or the page was opened at #make). */
.mkb.is-open .mkb-more,
.mkb:not([data-mk-ready]):focus-within .mkb-more,
.mkb:not([data-mk-ready]):target .mkb-more { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.mkb.is-open .mkb-prompt,
.mkb:not([data-mk-ready]):focus-within .mkb-prompt,
.mkb:not([data-mk-ready]):target .mkb-prompt { height: 96px; overflow: auto; resize: vertical; }
.mkb.is-open .mkb-row,
.mkb:not([data-mk-ready]):focus-within .mkb-row { align-items: flex-start; }
.mkb.is-open .mkb-label,
.mkb:not([data-mk-ready]):focus-within .mkb-label { min-height: 44px; }

.mkb-how {
  margin: 0;
  color: #9ff7dc;
  font: 700 12px/1.5 var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mkb-dot { color: #ffd400; }
.mkb .mk-ideas { gap: 6px 10px; }
.mkb .mk-idea { min-height: 30px; padding: 4px 11px; font-size: 12px; }
.mkb-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mkb .mk-name {
  flex: 0 1 340px;
  min-width: 0;
  min-height: 40px;
  padding: 7px 12px;
  border: 2px solid #7f93ff;
  border-radius: 12px;
  background: rgba(4, 7, 36, 0.82);
  color: #effff6;
  caret-color: #3ff5c4;
  font: 15px/1.4 var(--font-body);
}
.mkb .mk-name::placeholder { color: #8f9bd6; opacity: 1; }
.mkb .mk-name:focus-visible { border-color: #ffd400; outline: 3px solid rgba(255, 212, 0, 0.55); outline-offset: 1px; }
.mkb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mkb-foot .mk-fine { flex: 1 1 260px; }
.mkb-close { margin-left: auto; background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); box-shadow: none; }
.mkb-close:hover { color: var(--rr-navy); background: #fff; }
.mkb .mk-cc { margin: 0; padding-top: 10px; }
.mkb .mk-count { margin: 0; color: #b9c6ff; text-align: right; }
.mkb .cc { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
.mkb .cc-compact .cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── The game wall ─────────────────────────────────────────────────────────── */

.wall {
  container: wall / inline-size;
  position: relative;
  padding: 0 14px 16px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: radial-gradient(#e3ebff 1.1px, transparent 1.4px) 0 0 / 14px 14px, #fff;
  box-shadow: var(--shadow-chunky);
}
.main > .mkb + .wall { margin-top: 22px; }

/* One row at every width: "Play", then the chips as one strip (they all fit on the widest wall; narrower walls
   scroll them sideways, and the candy tabs above list the same categories). */
.wall-head {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 -14px 16px;
  padding: 9px 0 10px 14px;
  border-bottom: 3px solid var(--rr-navy);
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, #2459d6, #173f9f);
}
.wall-head::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}
.wall-title { position: relative; flex: none; margin: 0; color: #ffd400; font: 18px/1.2 var(--font-arcade); text-shadow: 0 3px 0 #0a1150; }
.wall-chips { position: relative; flex: 1 1 0; min-width: 0; --focus: #ffd400; }
/* Positioned, so the screen-reader-only text in a chip stays inside the scrolling strip. */
.wall-chips ul {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0;
  padding: 3px 14px 5px 2px;
  overflow-x: auto;
  list-style: none;
  scroll-padding: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.wall-chips ul::-webkit-scrollbar { display: none; }
.wall-chips li { flex: none; scroll-snap-align: start; }
.wall-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px;
  border: 2px solid #0a1150;
  border-radius: 999px;
  background: #fff;
  color: var(--rr-navy);
  font: 700 11.5px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 0 #0a1150;
  transition: transform 0.12s var(--ease-out), background-color 0.12s;
}
.wall-chip:hover { transform: translateY(-1px); background: var(--accent-bg); color: var(--accent-on); }
.wall-chip.is-on { background: var(--rr-yellow); color: var(--rr-navy); }
.wall-chip-all, .wall-chip-new { --accent-bg: #fff6c2; --accent-on: var(--rr-navy); }
.wall-chip-new::before { content: "★"; color: #e8392c; }
.wall-chip-judge { --accent-bg: #5a24b0; --accent-on: #fff; background: #f1e9ff; color: #3d1a80; }
.wall-chip-n { min-width: 18px; padding: 2px 6px; border-radius: 999px; background: #5a24b0; color: #fff; font-size: 11px; text-align: center; }
.wall-chip-judge:hover .wall-chip-n { background: #ffd400; color: var(--rr-navy); }
/* Category chips wear a tint of their shelf color (the full color on hover). */
.wall-chip-cat { background: color-mix(in srgb, var(--accent) 18%, #fff); }

/* The grid. Column counts by the wall's own width; keep in step with WALL_COLUMNS in src/site/pages/home.ts,
   which renders .wall-x<cols> on whatever does not fit a layout, .wall-b4-<cols> on the big tile where it is 4
   columns wide, and .wall-m2-<cols> on the Make cabinet of an empty arcade. */
.wall-grid { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.wall-grid > li { min-width: 0; }
/* "Skip to the games" lands here (with room above for the ribbon and the "Judge me!" stickers). */
.wall-grid { scroll-margin-top: 24px; }
.wall-grid:focus { outline: none; }
.wall-grid:focus-visible { outline: 3px dashed var(--rr-navy); outline-offset: 6px; border-radius: 6px; }

@container wall (width < 480px) {
  .wall-grid { --cols: 2; gap: 10px; }
  .wall-x2 { display: none !important; }
}
@container wall (480px <= width < 720px) {
  .wall-grid { --cols: 3; }
  .wall-x3 { display: none !important; }
  .wall-m2-3 { grid-column: span 2; }
}
@container wall (720px <= width < 820px) {
  .wall-grid { --cols: 4; }
  .wall-x4 { display: none !important; }
  .wall-m2-4 { grid-column: span 2; }
}
@container wall (820px <= width < 920px) {
  .wall-grid { --cols: 5; }
  .wall-x5 { display: none !important; }
  .wall-m2-5 { grid-column: span 2; }
  .wt-big.wall-b4-5 { grid-column: span 4; }
}
@container wall (920px <= width < 1040px) {
  .wall-grid { --cols: 6; }
  .wall-x6 { display: none !important; }
  .wall-m2-6 { grid-column: span 2; }
  .wt-big.wall-b4-6 { grid-column: span 4; }
}
@container wall (width >= 1040px) {
  .wall-grid { --cols: 7; }
  .wall-x7 { display: none !important; }
  .wall-m2-7 { grid-column: span 2; }
  .wt-big.wall-b4-7 { grid-column: span 4; }
}

/* ── Tiles ─────────────────────────────────────────────────────────────────── */

.wt { position: relative; }
.wt-link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px 6px 9px;
  border: 3px solid var(--rr-navy);
  border-radius: 12px;
  background: #fff;
  color: var(--rr-navy);
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.28), inset 0 -4px 0 var(--accent);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.18s;
}
.wt-link:hover, .wt-link:focus-visible {
  transform: translateY(-4px) rotate(-0.6deg);
  background-color: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--rr-navy);
  box-shadow: 0 9px 0 rgba(20, 32, 107, 0.22), inset 0 -4px 0 var(--accent);
}
.wt-link:focus-visible { outline: 3px solid var(--rr-navy); outline-offset: 3px; }
.wt-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--rr-navy);
  border-radius: 8px;
  background: var(--accent);
}
.wt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--ease-out); }
.wt-link:hover .wt-thumb img { transform: scale(1.05); }
.wt-thumb::after {
  content: "";
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* Up to two lines (room for two is kept, so every tile in a row lines up); longer names end in "…" and show in full
   in the title's tooltip. */
.wt-title {
  display: -webkit-box;
  min-height: 2.6em;
  margin: 6px 2px 0;
  overflow: hidden;
  font: 700 13px/1.3 var(--font-body);
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wt-link:hover .wt-title { text-decoration: underline; text-decoration-thickness: 2px; }
.wt-meta { display: flex; align-items: center; gap: 2px 8px; margin: 2px 2px 3px; overflow: hidden; color: var(--rr-muted); font-size: 11.5px; white-space: nowrap; }
.wt-rate { color: #7a4f00; font-weight: 700; }
.wt-rate > [aria-hidden="true"] { color: #f5a400; text-shadow: 0 1px 0 #a35f00; }
.wt-plays { overflow: hidden; text-overflow: ellipsis; }

/* Under Judgment: a lilac card, a "Judge me!" sticker and the time left. */
.wt.is-judging .wt-link { background-color: #f6f0ff; }
.wt.is-judging .wt-link:hover, .wt.is-judging .wt-link:focus-visible { background-color: #ece0ff; }
.wt-sticker {
  position: absolute;
  top: -9px;
  right: -7px;
  z-index: var(--z-raised);
  padding: 5px 7px 4px;
  border: 2px solid var(--rr-navy);
  border-radius: 8px;
  background: linear-gradient(180deg, #b47bff, #7433dc);
  color: #fff;
  font: 8px/1 var(--font-arcade);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--rr-navy);
  transform: rotate(7deg);
  pointer-events: none;
}
.wt-left { display: inline-flex; align-items: center; gap: 5px; color: #3d1a80; font-weight: 700; }
.wt-left .chip-clock { width: 12px; height: 12px; }
.wt-new {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: var(--z-raised);
  padding: 3px 5px;
  border: 2px solid var(--rr-navy);
  border-radius: 5px;
  background: var(--rr-yellow);
  color: #a01a10;
  font: 8px/1 var(--font-arcade);
  text-transform: uppercase;
  box-shadow: 0 2px 0 var(--rr-navy);
}

/* ── The big tile: Game of the Week (or the top pick), 2x2 or 4x2 ──────────── */

/* Its own container: 4 columns wide (a few games on a wide wall) it puts the picture and the blurb side by side. */
.wt-big { grid-column: span 2; grid-row: span 2; container: bigtile / inline-size; }
.wt-big .wt-link {
  padding: 8px 8px 12px;
  background: radial-gradient(110% 90% at 15% 0%, #3d63ff 0%, #1a2a9c 58%, #14206b 100%);
  color: #fff;
  box-shadow: 0 5px 0 rgba(20, 32, 107, 0.3), inset 0 -5px 0 var(--accent);
  --focus: #ffd400;
}
.wt-big .wt-link:hover, .wt-big .wt-link:focus-visible {
  transform: translateY(-4px);
  background-color: transparent;
  color: #fff;
  box-shadow: 0 10px 0 rgba(20, 32, 107, 0.24), inset 0 -5px 0 var(--accent);
}
.wt-big .wt-link:focus-visible { outline-color: var(--rr-navy); }
.wt-big .wt-thumb { flex: 1 1 auto; min-height: 110px; aspect-ratio: auto; border-width: 3px; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent); }
.wt-big .wt-thumb img { position: absolute; inset: 0; }
.wt-ribbon {
  position: absolute;
  top: 18px;
  left: -7px;
  z-index: var(--z-raised);
  padding: 6px 13px 6px 11px;
  border: 3px solid var(--rr-navy);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #ffe867, #ffb000);
  color: var(--rr-navy);
  font: 9px/1.2 var(--font-arcade);
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.wt-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe867 0%, #ffc21a 55%, #ffad00 100%);
  color: var(--rr-navy);
  font: 11px/1 var(--font-arcade);
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--rr-navy), inset 0 2px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.15s var(--ease-out);
}
.wt-big .wt-link:hover .wt-play { transform: scale(1.06); }
.wt-big-copy { display: grid; gap: 5px; padding: 10px 4px 0; }
.wt-big .wt-title {
  display: -webkit-box;
  margin: 0;
  color: #ffd400;
  font: 15px/1.35 var(--font-arcade);
  text-shadow: 0 2px 0 #0a1150;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.wt-blurb {
  display: -webkit-box;
  overflow: hidden;
  color: #e6edff;
  font-size: 12.5px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wt-big .wt-meta { flex-wrap: wrap; margin: 2px 0 0; color: #dfe7ff; font-size: 12px; }
.wt-big .stars-count, .wt-unrated { color: #c7d3ff; }
.wt-cat { padding: 1px 8px; border: 2px solid #0a1150; border-radius: 999px; background: var(--accent-bg); color: var(--accent-on); font-weight: 700; font-size: 11px; }
.wt-big .wt-left { color: #e9dcff; }
.wt-big .wt-sticker { top: -10px; right: -8px; font-size: 10px; padding: 6px 9px 5px; }
.wt-big .wt-title { min-height: 0; }

@container bigtile (width >= 520px) {
  .wt-big .wt-link { flex-direction: row; gap: 16px; padding: 9px 9px 13px; }
  .wt-big .wt-thumb { flex: 0 0 62%; min-height: 0; }
  .wt-big-copy { flex: 1 1 0; min-width: 0; align-content: center; gap: 9px; padding: 6px 6px 4px 0; }
  .wt-big .wt-title { font-size: 17px; -webkit-line-clamp: 3; }
  .wt-blurb { font-size: 13.5px; -webkit-line-clamp: 5; }
  .wt-big .wt-meta { gap: 6px 10px; }
}

/* ── Cabinets that top up a young wall ─────────────────────────────────────── */

.wall-cab { display: flex; min-height: 0; }
.wall-cab > .tile-slot { flex: 1 1 auto; min-height: 150px; padding: 12px 8px; gap: 5px; transform: none; }
.wall-cab > .tile-slot:hover { transform: translateY(-3px); }
.wall-cab .slot-plus { width: 40px; height: 40px; font-size: 16px; }
.wall-cab .slot-title { font-size: 12px; }
.wall-cab .slot-text { font-size: 11.5px; }

/* "+ Make a game": one quiet cabinet like the others (warmer stripes), so the games stay the call to action. */
.wall-cab-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 150px;
  padding: 12px 8px;
  border: 3px dashed #7f93cf;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(-45deg, #fffcf0 0 12px, #fff5d6 12px 24px);
  color: var(--rr-navy);
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s var(--ease-out), background-color 0.18s, border-color 0.18s;
}
.wall-cab-link:hover, .wall-cab-link:focus-visible { transform: translateY(-3px); border-color: var(--rr-navy); background: #fff8d6; color: var(--rr-navy); }
.wall-cab-plus {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--rr-navy);
  border-radius: 50%;
  background: #fff;
  color: var(--rr-navy);
  font: 16px/1 var(--font-arcade);
  box-shadow: 0 3px 0 var(--rr-navy);
}
.wall-cab-link:hover .wall-cab-plus, .wall-cab-link:focus-visible .wall-cab-plus { background: #fff2a8; }
.wall-cab-title { font: 700 12px/1.2 var(--font-pixel); text-transform: uppercase; }
.wall-cab-text { max-width: 22ch; color: var(--rr-muted); font-size: 11.5px; line-height: 1.35; }

.wall-cab-open {
  align-items: center;
  justify-content: center;
  min-height: 150px;
  border: 3px dashed #b8c4e6;
  border-radius: 12px;
  background: repeating-linear-gradient(-45deg, #f8faff 0 12px, #f0f4ff 12px 24px);
}
.wall-cab-coin { padding: 5px 8px; border: 2px dashed #a9b6dc; border-radius: 6px; color: #7d8ab3; font: 8px/1.3 var(--font-arcade); text-transform: uppercase; }

/* ── Welcome (nothing in the Arcade yet) and the foot ──────────────────────── */

.wall-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 10px 16px;
  border: 3px dashed #8a9fd9;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf0, #fff3c4);
}
.wall-welcome-art { flex: none; width: 52px; height: auto; animation: rr-float 3.2s ease-in-out infinite; }
.wall-welcome-copy { min-width: 0; }
.wall-welcome-title { margin: 0 0 4px; color: var(--rr-navy); font: 14px/1.3 var(--font-arcade); }
.wall-welcome-copy p { margin: 0; font-size: 13px; }

.wall-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.wall-legend { display: flex; flex: 1 1 320px; align-items: center; gap: 12px; margin: 0; color: var(--rr-muted); font-size: 12.5px; }
.wt-sticker-key { position: static; flex: none; transform: rotate(-4deg); }
.wall-more { margin-left: auto; }
.wall-more-arrow { font-size: 0.9em; }

/* ── Phones and small tablets ──────────────────────────────────────────────── */

@container wall (width < 480px) {
  .wt-link { padding: 5px 5px 8px; border-radius: 11px; }
  .wt-title { font-size: 12.5px; }
  .wt-big .wt-title { font-size: 13px; }
  /* The big tile spans the whole row here, with no neighbours to stretch it: give its picture a real shape. */
  .wt-big .wt-thumb { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .wt-blurb { -webkit-line-clamp: 2; font-size: 12px; }
  .wt-play { padding: 8px 12px; font-size: 10px; }
  .wall-cab > .tile-slot, .wall-cab-link, .wall-cab-open { min-height: 130px; }
  .wall-welcome { align-items: flex-start; padding: 10px 12px; }
  .wall-welcome-art { width: 40px; }
  .wall-legend { flex-basis: 100%; }
  .wall-more { margin: 0 auto; }
}

/* Tablets and phones: the label rides on the frame like a marquee tab, so the input gets the whole row. */
@media (max-width: 899px) {
  .mkb { margin-top: 12px; }
  .mkb-form { padding-top: 9px; }
  .mkb-label {
    position: absolute;
    top: -15px;
    left: 12px;
    z-index: var(--z-raised);
    gap: 6px;
    padding: 4px 8px;
    border: 2px solid #ffd400;
    border-radius: 7px;
    background: #0a0f44;
    box-shadow: 0 2px 0 #0a1150;
  }
  .mkb-new { padding: 2px 4px; border-width: 1px; font-size: 7px; }
  .mkb-label-text { max-width: none; font-size: 8px; line-height: 1.2; white-space: nowrap; }
  .mkb.is-open .mkb-label,
  .mkb:not([data-mk-ready]):focus-within .mkb-label { min-height: 0; }
}

/* Phones: "Make it" is an icon button too, so the folded bar stays one line, 64 px tall. */
@media (max-width: 599px) {
  .mkb { border-radius: 16px; }
  .mkb-form { padding: 9px 8px 7px 9px; border-radius: 13px; }
  .mkb-row { gap: 8px; }
  .mkb-prompt { height: 42px; padding: 9px 10px 9px 27px; }
  .mkb-prompt::placeholder { font-size: 14px; }
  .mkb .mk-caret { left: 10px; top: 8px; }
  .mkb-go { width: 46px; min-height: 42px; padding: 0; }
  .mkb-go .mk-make-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  /* A sparkle, not the ▶ of the wall's yellow Play buttons. */
  .mkb-go .mk-make-icon { display: none; }
  .mkb-go .mkb-spark { display: block; width: 20px; height: 20px; }
  .mkb.is-open .mkb-prompt,
  .mkb:not([data-mk-ready]):focus-within .mkb-prompt { height: 120px; }
  .mkb-body { padding: 12px 2px 4px; gap: 10px; }
  .mkb-how { font-size: 11px; }
  .mkb .mk-keys { display: none; }
  .mkb .cc-compact .cc-cards { grid-template-columns: minmax(0, 1fr); }
  .main > .mkb + .wall { margin-top: 18px; }
  .wall { padding: 0 8px 12px; }
  .wall-head { margin: 0 -8px 12px; padding: 8px 0 9px 10px; }
  .wall-title { font-size: 14px; }
}

/* ── Motion and contrast ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mkb.is-zapped, .wall-welcome-art { animation: none !important; }
  .mkb-more, .mkb-prompt { transition: none; }
  .wt-link:hover, .wt-link:focus-visible, .wall-cab-link:hover, .wall-cab-link:focus-visible,
  .wall-cab > .tile-slot:hover, .wall-chip:hover { transform: none; }
  .wt-link:hover .wt-thumb img, .wt-big .wt-link:hover .wt-play { transform: none; }
}

@media (forced-colors: active) {
  .mkb { background: CanvasText; }
  .mkb-form { background: Canvas; }
  .mkb-go, .mkb-close { border: 2px solid ButtonText; }
  .wt-link, .wall-cab-link, .wall-chip { border: 2px solid CanvasText; }
  .wall-chip.is-on { outline: 2px solid Highlight; }
}