/* Atkinson Hyperlegible by the Braille Institute, bundled under the SIL Open
   Font License (assets/fonts/OFL.txt). Served from the plugin, so no third
   party font service is contacted. A private family name avoids clashing with
   any copy a theme may load. */
@font-face {
  font-display: swap;
  font-family: "DWC Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DWC Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700 900;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

.dwc-memory-shell {
  --dwc-font: "DWC Atkinson Hyperlegible", "Atkinson Hyperlegible", Verdana, Geneva, sans-serif;
  --dwc-serif: Georgia, "Times New Roman", serif;
  /* Spacing unit. Themes often set html { font-size: 62.5% }, which would
     shrink every rem based value, so the game uses its own fixed unit. */
  --dwc-rem: 16px;
  --dwc-ink: #17333b;
  --dwc-muted: #52666b;
  --dwc-porch: #1f6670;
  --dwc-porch-dark: #174d55;
  --dwc-garden: #39705d;
  --dwc-marigold: #b87916;
  --dwc-paper: #fbfdfc;
  --dwc-mist: #e7f1ef;
  --dwc-sky: #dcebef;
  --dwc-line: #b7cdca;
  --dwc-focus: #7a3ca1;
  --dwc-correction: #fff4d8;
  color: var(--dwc-ink);
  color-scheme: light;
  font-family: var(--dwc-font);
  font-size: 17px;
  line-height: 1.6;
  margin: calc(1.5 * var(--dwc-rem)) auto;
  max-width: 1120px;
  position: relative;
  text-align: left;
  width: 100%;
}

.dwc-memory-shell[data-text-size="large"] { font-size: 20px; }
.dwc-memory-shell[data-text-size="larger"] { font-size: 23px; }

.dwc-memory-shell *,
.dwc-memory-shell *::before,
.dwc-memory-shell *::after { box-sizing: border-box; }

.dwc-memory-shell[data-dwc-meet-neighbors] button,
.dwc-memory-shell[data-dwc-meet-neighbors] input { font: inherit; }

.dwc-memory-shell[data-dwc-meet-neighbors] button { border-radius: 7px; text-transform: none; letter-spacing: normal; }

/* Themes often assign their own fonts to p, button, h1 and similar elements.
   The game keeps one consistent, highly legible type system instead. */
.dwc-memory-shell[data-dwc-meet-neighbors],
.dwc-memory-shell[data-dwc-meet-neighbors] :is(p, li, span, strong, em, small, label, legend, a, button, input, figcaption, progress) { font-family: var(--dwc-font) !important; }

.dwc-memory-shell[data-dwc-meet-neighbors] :is(h1, h2, h3),
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-brand,
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-brand span,
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-avatar-initials,
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-person-detail,
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-results strong { font-family: var(--dwc-serif) !important; }

.dwc-memory-shell[data-dwc-meet-neighbors] h1,
.dwc-memory-shell[data-dwc-meet-neighbors] h2,
.dwc-memory-shell[data-dwc-meet-neighbors] h3,
.dwc-memory-shell[data-dwc-meet-neighbors] p { margin-top: 0; }

.dwc-memory-shell[data-dwc-meet-neighbors] h1,
.dwc-memory-shell[data-dwc-meet-neighbors] h2 {
  color: var(--dwc-ink);
  font-family: var(--dwc-serif);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
}

.dwc-memory-shell[data-dwc-meet-neighbors] h1 { font-size: clamp(calc(2 * var(--dwc-rem)), 5vw, calc(3.55 * var(--dwc-rem))); font-size: clamp(calc(1.75 * var(--dwc-rem)), 6.5cqi, calc(3.55 * var(--dwc-rem))); margin-bottom: calc(1 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] h2 { font-size: clamp(calc(1.45 * var(--dwc-rem)), 3vw, calc(2.1 * var(--dwc-rem))); font-size: clamp(calc(1.35 * var(--dwc-rem)), 3.6cqi, calc(2.1 * var(--dwc-rem))); margin: calc(1.6 * var(--dwc-rem)) 0 calc(0.7 * var(--dwc-rem)); }

.dwc-sr-only {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* Hidden until it receives keyboard focus. A negative top offset is not enough
   because the game usually sits below a page title, so the link stayed visible. */
.dwc-skip-link {
  background: var(--dwc-ink) !important;
  border-radius: 8px;
  color: #fff !important;
  left: calc(1 * var(--dwc-rem));
  padding: calc(0.7 * var(--dwc-rem)) calc(1 * var(--dwc-rem));
  position: absolute;
  top: calc(1 * var(--dwc-rem));
  z-index: 10002;
}

.dwc-skip-link:not(:focus) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  width: 1px;
}

.dwc-app {
  container-name: dwc-app;
  container-type: inline-size;
  background: var(--dwc-paper);
  border: 1px solid var(--dwc-line);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(23, 51, 59, 0.12);
  min-height: 660px;
  overflow: hidden;
  position: relative;
}

.dwc-header {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--dwc-line);
  display: flex;
  gap: calc(1 * var(--dwc-rem));
  justify-content: space-between;
  min-height: 78px;
  padding: calc(0.8 * var(--dwc-rem)) clamp(calc(1 * var(--dwc-rem)), 4vw, calc(2.5 * var(--dwc-rem)));
}

.dwc-brand {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--dwc-ink) !important;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dwc-serif) !important;
  font-size: 1.08em !important;
  font-weight: 700;
  gap: calc(0.75 * var(--dwc-rem));
  min-height: 48px;
  padding: calc(0.35 * var(--dwc-rem)) !important;
}

.dwc-roof {
  background: var(--dwc-porch);
  border-radius: 3px 3px 9px 9px;
  display: inline-block;
  height: 29px;
  position: relative;
  width: 31px;
}

.dwc-roof::before {
  border-bottom: 14px solid var(--dwc-porch);
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  content: "";
  left: -3px;
  position: absolute;
  top: -10px;
}

.dwc-roof::after {
  background: var(--dwc-paper);
  border-radius: 10px 10px 0 0;
  bottom: 0;
  content: "";
  height: 18px;
  left: 10px;
  position: absolute;
  width: 11px;
}

.dwc-tools { display: flex; flex-wrap: wrap; gap: calc(0.35 * var(--dwc-rem)); justify-content: flex-end; }

.dwc-tool,
.dwc-link-button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px;
  color: var(--dwc-porch-dark) !important;
  cursor: pointer;
  font-size: 0.88em !important;
  font-weight: 700;
  min-height: 44px;
  padding: calc(0.55 * var(--dwc-rem)) calc(0.72 * var(--dwc-rem)) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.dwc-main {
  background:
    linear-gradient(180deg, rgba(220, 235, 239, 0.62), rgba(251, 253, 252, 0) 230px),
    var(--dwc-paper);
  min-height: 580px;
  padding: clamp(calc(1.4 * var(--dwc-rem)), 5vw, calc(4.5 * var(--dwc-rem)));
}

.dwc-panel { margin: 0 auto; max-width: 760px; }

.dwc-eyebrow,
.dwc-step-label {
  color: var(--dwc-porch-dark);
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.11em;
  margin-bottom: calc(0.55 * var(--dwc-rem));
  text-transform: uppercase;
}

.dwc-lead { color: var(--dwc-muted); font-size: 1.16em; max-width: 680px; }

.dwc-welcome {
  align-items: center;
  display: grid;
  gap: clamp(calc(2 * var(--dwc-rem)), 6vw, calc(6 * var(--dwc-rem)));
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  margin: 0 auto;
  max-width: 980px;
}

.dwc-safety {
  border-left: 5px solid var(--dwc-garden);
  margin: calc(1.8 * var(--dwc-rem)) 0;
  max-width: 720px;
  padding-left: calc(1 * var(--dwc-rem));
}

.dwc-safety p { color: var(--dwc-muted); margin: calc(0.3 * var(--dwc-rem)) 0 0; }

.dwc-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.75 * var(--dwc-rem));
  margin-top: calc(1.5 * var(--dwc-rem));
}

.dwc-button {
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  cursor: pointer;
  align-items: center;
  display: inline-flex;
  font-weight: 800 !important;
  justify-content: center;
  line-height: 1.25 !important;
  min-height: 52px;
  padding: calc(0.8 * var(--dwc-rem)) calc(1.2 * var(--dwc-rem)) !important;
  text-align: center;
  text-decoration: none !important;
}

.dwc-button-primary {
  background: var(--dwc-porch) !important;
  color: #fff !important;
}

.dwc-button-primary:hover { background: var(--dwc-porch-dark) !important; }

.dwc-button-secondary {
  background: #fff !important;
  border-color: var(--dwc-porch) !important;
  color: var(--dwc-porch-dark) !important;
}

.dwc-button-secondary:hover { background: var(--dwc-mist) !important; }

.dwc-memory-shell button:focus-visible,
.dwc-memory-shell a:focus-visible,
.dwc-memory-shell input:focus-visible,
.dwc-memory-shell [tabindex="-1"]:focus-visible {
  outline: 4px solid var(--dwc-focus) !important;
  outline-offset: 3px !important;
}

.dwc-memory-shell [tabindex="-1"]:focus { outline: 0 !important; }

.dwc-street {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.9 * var(--dwc-rem));
  justify-content: center;
  min-height: 300px;
  padding: calc(1 * var(--dwc-rem)) 0;
  position: relative;
}

.dwc-street::after {
  background: var(--dwc-garden);
  border-radius: 50%;
  bottom: 44px;
  content: "";
  height: 8px;
  left: 3%;
  opacity: 0.55;
  position: absolute;
  width: 94%;
}

.dwc-street p { color: var(--dwc-muted); flex-basis: 100%; font-size: 0.84em; margin: calc(1 * var(--dwc-rem)) 0 0; text-align: center; }

.dwc-house {
  background: #fff;
  border: 3px solid var(--dwc-ink);
  border-radius: 7px 7px 2px 2px;
  display: block;
  height: 112px;
  position: relative;
  width: 92px;
  z-index: 1;
}

.dwc-house::before {
  background: var(--dwc-marigold);
  border: 3px solid var(--dwc-ink);
  content: "";
  height: 66px;
  left: 10px;
  position: absolute;
  top: -37px;
  transform: rotate(45deg);
  width: 66px;
  z-index: -1;
}

.dwc-house i {
  background: var(--dwc-porch);
  border-radius: 18px 18px 0 0;
  bottom: 0;
  height: 64px;
  left: 31px;
  position: absolute;
  width: 28px;
}

.dwc-house-two { height: 89px; transform: scale(0.88); }
.dwc-house-two::before { background: var(--dwc-sky); }

.dwc-tree {
  align-items: center;
  color: var(--dwc-garden);
  display: flex;
  font-size: 110px;
  height: 150px;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 82px;
  z-index: 1;
}

.dwc-tree::after { background: #6b5135; bottom: 0; content: ""; height: 58px; position: absolute; width: 10px; z-index: -1; }

.dwc-strategy-note,
.dwc-cue,
.dwc-hint,
.dwc-feedback,
.dwc-gentle-note {
  border-left: 5px solid var(--dwc-porch);
  margin: calc(1.4 * var(--dwc-rem)) 0;
  padding: calc(0.8 * var(--dwc-rem)) calc(1 * var(--dwc-rem));
}

.dwc-strategy-note { background: var(--dwc-mist); }
.dwc-strategy-note p,
.dwc-cue p,
.dwc-hint p,
.dwc-feedback p { margin: calc(0.25 * var(--dwc-rem)) 0; }

.dwc-skill { color: var(--dwc-muted); font-size: 1.05em; }

.dwc-round-progress { align-items: center; display: flex; gap: calc(1 * var(--dwc-rem)); justify-content: space-between; margin-bottom: calc(1.6 * var(--dwc-rem)); }
.dwc-round-progress span { color: var(--dwc-muted); font-size: 0.86em; font-weight: 700; }
.dwc-round-progress progress { accent-color: var(--dwc-porch); height: 12px; max-width: 260px; width: 42%; }

.dwc-door { margin: calc(1.4 * var(--dwc-rem)) auto; max-width: 350px; text-align: center; }

.dwc-door-frame {
  align-items: center;
  background: var(--neighbor-color, var(--dwc-porch));
  border: 9px solid #fff;
  border-radius: 160px 160px 12px 12px;
  box-shadow: 0 0 0 2px var(--dwc-ink), 0 12px 25px rgba(23, 51, 59, 0.16);
  color: #fff;
  display: flex;
  height: clamp(210px, 36vw, 290px);
  justify-content: center;
  margin: 0 auto;
  max-width: 230px;
  overflow: hidden;
  position: relative;
  width: 72%;
}

.dwc-door-frame img { height: 100%; object-fit: cover; width: 100%; }
.dwc-avatar-initials { font-family: var(--dwc-serif); font-size: 4em; font-weight: 700; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); }
.dwc-door-knob { background: #f5d27d; border: 2px solid var(--dwc-ink); border-radius: 50%; bottom: 22px; height: 15px; position: absolute; right: 18px; width: 15px; }
.dwc-door figcaption { color: var(--dwc-muted); font-size: 0.84em; margin-top: calc(0.85 * var(--dwc-rem)); }

.dwc-person-name,
.dwc-person-detail,
.dwc-pronunciation { text-align: center; }
.dwc-person-detail { font-family: var(--dwc-serif); font-size: 1.18em; }
.dwc-pronunciation { color: var(--dwc-muted); font-size: 0.86em; }

.dwc-cue { align-items: flex-start; background: #fff8e8; border-color: var(--dwc-marigold); display: flex; gap: calc(0.75 * var(--dwc-rem)); }
.dwc-cue > span:first-child { color: var(--dwc-marigold); font-size: 1.5em; line-height: 1.2; }

.dwc-answer-grid { display: grid; gap: calc(0.75 * var(--dwc-rem)); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: calc(1.5 * var(--dwc-rem)) 0; }

.dwc-answer {
  background: #fff !important;
  border: 2px solid var(--dwc-line) !important;
  border-radius: 12px !important;
  color: var(--dwc-ink) !important;
  cursor: pointer;
  font-weight: 700 !important;
  min-height: 62px;
  padding: calc(0.85 * var(--dwc-rem)) calc(1 * var(--dwc-rem)) !important;
  text-align: left;
}

.dwc-answer:hover { background: var(--dwc-mist) !important; border-color: var(--dwc-porch) !important; }
.dwc-answer:disabled { cursor: default; opacity: 0.72; }

.dwc-help-row { align-items: center; color: var(--dwc-muted); display: flex; flex-wrap: wrap; gap: calc(0.9 * var(--dwc-rem)); justify-content: space-between; }
.dwc-hint { background: #fff8e8; border-color: var(--dwc-marigold); }
.dwc-feedback.is-correct { background: var(--dwc-mist); border-color: var(--dwc-garden); }
.dwc-feedback.is-supportive { background: var(--dwc-correction); border-color: var(--dwc-marigold); }
.dwc-gentle-note { background: #fff; border-color: var(--dwc-line); color: var(--dwc-muted); }

.dwc-activity-scene { align-items: center; background: var(--dwc-mist); border-radius: 16px; display: flex; flex-wrap: wrap; gap: calc(0.8 * var(--dwc-rem)); justify-content: center; margin: calc(1.5 * var(--dwc-rem)) 0; min-height: 150px; padding: calc(1.5 * var(--dwc-rem)); }
.dwc-activity-item { align-items: center; background: #fff; border: 2px dashed var(--dwc-line); border-radius: 50%; color: var(--dwc-line); display: flex; font-size: 1.8em; height: 58px; justify-content: center; width: 58px; }
.dwc-activity-item.is-complete { background: var(--dwc-garden); border-color: var(--dwc-garden); color: #fff; }

.dwc-intentions ol { counter-reset: intentions; list-style: none; margin: calc(1.4 * var(--dwc-rem)) 0; padding: 0; }
.dwc-intentions li { align-items: flex-start; background: var(--dwc-mist); border-radius: 12px; counter-increment: intentions; display: flex; gap: calc(0.9 * var(--dwc-rem)); margin: calc(0.8 * var(--dwc-rem)) 0; padding: calc(1 * var(--dwc-rem)); }
.dwc-intentions li::before { align-items: center; background: var(--dwc-porch); border-radius: 50%; color: #fff; content: counter(intentions); display: flex; flex: 0 0 36px; font-weight: 800; height: 36px; justify-content: center; }

.dwc-results { display: grid; gap: calc(0.8 * var(--dwc-rem)); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: calc(1.6 * var(--dwc-rem)) 0; }
.dwc-results p { background: var(--dwc-mist); border-radius: 14px; margin: 0; padding: calc(1.15 * var(--dwc-rem)); }
.dwc-results strong { display: block; font-family: var(--dwc-serif); font-size: 1.8em; line-height: 1.1; }
.dwc-results span { color: var(--dwc-muted); display: block; font-size: 0.82em; margin-top: calc(0.4 * var(--dwc-rem)); }

.dwc-achievements { display: flex; flex-wrap: wrap; gap: calc(0.6 * var(--dwc-rem)); list-style: none; margin: 0; padding: 0; }
.dwc-achievements li { align-items: center; background: #fff8e8; border: 1px solid #e5c77d; border-radius: 999px; display: flex; gap: calc(0.45 * var(--dwc-rem)); padding: calc(0.45 * var(--dwc-rem)) calc(0.8 * var(--dwc-rem)); }
.dwc-achievements span { color: var(--dwc-marigold); }

.dwc-levels ol,
.dwc-progress ol { display: grid; gap: calc(0.7 * var(--dwc-rem)); list-style: none; margin: calc(1.5 * var(--dwc-rem)) 0; padding: 0; }

.dwc-level-card {
  align-items: center;
  background: #fff !important;
  border: 2px solid var(--dwc-line) !important;
  border-radius: 12px !important;
  color: var(--dwc-ink) !important;
  cursor: pointer;
  display: grid;
  gap: calc(0.9 * var(--dwc-rem));
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-height: 76px;
  padding: calc(0.75 * var(--dwc-rem)) !important;
  text-align: left;
  width: 100%;
}

.dwc-level-card:hover { border-color: var(--dwc-porch) !important; }
.dwc-level-number,
.dwc-map-marker { align-items: center; background: var(--dwc-mist); border-radius: 50%; display: flex; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.dwc-level-card small,
.dwc-level-card strong { display: block; }
.dwc-level-card small,
.dwc-level-status { color: var(--dwc-muted); font-size: 0.78em; }

.dwc-progress li { align-items: center; border-left: 3px solid var(--dwc-line); display: flex; gap: calc(0.9 * var(--dwc-rem)); min-height: 68px; padding: calc(0.4 * var(--dwc-rem)) 0 calc(0.4 * var(--dwc-rem)) calc(1 * var(--dwc-rem)); }
.dwc-progress li.is-complete { border-color: var(--dwc-garden); }
.dwc-progress li.is-current { background: var(--dwc-mist); border-color: var(--dwc-porch); border-radius: 0 10px 10px 0; }
.dwc-progress small,
.dwc-progress strong { display: block; }
.dwc-progress small { color: var(--dwc-muted); }
.dwc-progress .is-complete .dwc-map-marker { background: var(--dwc-garden); color: #fff; }

.dwc-dialog-layer { inset: 0; position: fixed; z-index: 10000; }
.dwc-dialog-backdrop { background: rgba(10, 25, 29, 0.64); inset: 0; position: absolute; }
.dwc-dialog { background: var(--dwc-paper); border: 2px solid var(--dwc-ink); border-radius: 18px; box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28); left: 50%; max-height: calc(100vh - calc(2 * var(--dwc-rem))); max-width: 600px; overflow: auto; padding: clamp(calc(1.2 * var(--dwc-rem)), 4vw, calc(2.4 * var(--dwc-rem))); position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(100% - calc(2 * var(--dwc-rem))); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-dialog h2 { margin-top: 0; }
.dwc-dialog-actions { display: flex; flex-wrap: wrap; gap: calc(0.65 * var(--dwc-rem)); margin-top: calc(1.4 * var(--dwc-rem)); }

.dwc-settings-form fieldset { border: 0; margin: 0 0 calc(1 * var(--dwc-rem)); padding: 0; }
.dwc-settings-form legend { font-weight: 800; margin-bottom: calc(0.4 * var(--dwc-rem)); }
.dwc-settings-form label { align-items: center; display: flex; gap: calc(0.55 * var(--dwc-rem)); margin: calc(0.45 * var(--dwc-rem)) 0; min-height: 44px; }
.dwc-settings-form input { accent-color: var(--dwc-porch); height: 24px; width: 24px; }

.dwc-loading,
.dwc-error { align-items: center; background: var(--dwc-paper); border: 1px solid var(--dwc-line); border-radius: 20px; display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: calc(2 * var(--dwc-rem)); text-align: center; }
.dwc-leaf { color: var(--dwc-garden); font-size: calc(3 * var(--dwc-rem)); }

.dwc-high-contrast {
  --dwc-ink: #071316;
  --dwc-muted: #26393d;
  --dwc-porch: #004e59;
  --dwc-porch-dark: #003b43;
  --dwc-garden: #19583f;
  --dwc-marigold: #805100;
  --dwc-paper: #ffffff;
  --dwc-mist: #e4eeee;
  --dwc-sky: #d1e6eb;
  --dwc-line: #51676b;
  --dwc-focus: #6a00a8;
}

@media (max-width: 760px) {
  .dwc-memory-shell { margin: calc(0.75 * var(--dwc-rem)) 0; }
  .dwc-app { border-radius: 16px; min-height: 600px; }
  .dwc-header { align-items: flex-start; flex-direction: column; }
  .dwc-tools { justify-content: flex-start; width: 100%; }
  .dwc-main { min-height: 510px; padding: calc(1.35 * var(--dwc-rem)) calc(1 * var(--dwc-rem)) calc(2 * var(--dwc-rem)); }
  .dwc-welcome { grid-template-columns: 1fr; }
  .dwc-street { display: none; }
  .dwc-answer-grid,
  .dwc-results { grid-template-columns: 1fr; }
  .dwc-level-card { grid-template-columns: 44px minmax(0, 1fr); }
  .dwc-level-status { grid-column: 2; }
  .dwc-actions > .dwc-button { width: 100%; }
  .dwc-dialog-actions > .dwc-button { width: 100%; }
}

@media (max-width: 420px) {
  .dwc-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwc-tool { border: 1px solid var(--dwc-line) !important; text-align: center; }
  .dwc-round-progress { align-items: flex-start; flex-direction: column; gap: calc(0.35 * var(--dwc-rem)); }
  .dwc-round-progress progress { max-width: none; width: 100%; }
}

@container dwc-app (max-width: 760px) {
  .dwc-header { align-items: flex-start; flex-direction: column; }
  .dwc-tools { justify-content: flex-start; width: 100%; }
  .dwc-main { min-height: 510px; padding: calc(1.35 * var(--dwc-rem)) calc(1 * var(--dwc-rem)) calc(2 * var(--dwc-rem)); }
  .dwc-welcome { grid-template-columns: 1fr; }
  .dwc-street { display: none; }
  .dwc-answer-grid,
  .dwc-results { grid-template-columns: 1fr; }
  .dwc-level-card { grid-template-columns: 44px minmax(0, 1fr); }
  .dwc-level-status { grid-column: 2; }
  .dwc-actions > .dwc-button { width: 100%; }
}

@container dwc-app (min-width: 520px) and (max-width: 760px) {
  .dwc-main { padding: calc(2 * var(--dwc-rem)) calc(2.25 * var(--dwc-rem)) calc(2.5 * var(--dwc-rem)); }
  .dwc-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwc-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dwc-actions > .dwc-button { width: auto; }
}

@container dwc-app (max-width: 420px) {
  .dwc-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwc-tool { border: 1px solid var(--dwc-line) !important; text-align: center; }
  .dwc-round-progress { align-items: flex-start; flex-direction: column; gap: calc(0.35 * var(--dwc-rem)); }
  .dwc-round-progress progress { max-width: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dwc-memory-shell *,
  .dwc-memory-shell *::before,
  .dwc-memory-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .dwc-button,
  .dwc-answer,
  .dwc-level-card,
  .dwc-door-frame { forced-color-adjust: auto; }
  .dwc-safety,
  .dwc-hint,
  .dwc-feedback,
  .dwc-strategy-note { border-left-width: 7px; }
}

/* ---------------------------------------------------------------------------
   1.1.0: real photo faces, face choices, screen titles
   ------------------------------------------------------------------------ */

/* Screen titles are h2 so the page keeps a single h1 (the page title). */
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-screen-title {
  font-size: clamp(calc(1.75 * var(--dwc-rem)), 5vw, calc(3.2 * var(--dwc-rem)));
  font-size: clamp(calc(1.7 * var(--dwc-rem)), 6cqi, calc(3.2 * var(--dwc-rem)));
  margin: 0 0 calc(0.9 * var(--dwc-rem));
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome .dwc-screen-title { font-size: clamp(calc(2 * var(--dwc-rem)), 6.5cqi, calc(3.55 * var(--dwc-rem))); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-subtitle { color: var(--dwc-ink); font-family: var(--dwc-serif) !important; font-size: 1.22em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: calc(1.5 * var(--dwc-rem)) 0 calc(0.7 * var(--dwc-rem)); }

/* A neighbor's face: a cut-out photo standing on the card, no frame. */
.dwc-face { margin: calc(1 * var(--dwc-rem)) auto calc(0.4 * var(--dwc-rem)); max-width: 380px; text-align: center; }
.dwc-face-photo { align-items: flex-end; display: flex; height: clamp(220px, 34vw, 300px); justify-content: center; position: relative; }
.dwc-face-photo::before { background: radial-gradient(ellipse at 50% 100%, rgba(31, 102, 112, 0.17), rgba(31, 102, 112, 0) 70%); bottom: 0; content: ""; height: 58%; left: 6%; position: absolute; right: 6%; }
.dwc-face-photo img,
.dwc-face-photo svg,
.dwc-face-option-photo img,
.dwc-face-option-photo svg { display: block; height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; position: relative; user-select: none; width: auto; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.dwc-silhouette { fill: #a9bebb; }
.dwc-face figcaption { color: var(--dwc-muted); font-size: 0.88em; margin: calc(0.6 * var(--dwc-rem)) auto 0; max-width: 34ch; }

/* "Which one is ...?" photo choices */
.dwc-face-grid { display: grid; gap: calc(0.75 * var(--dwc-rem)); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: calc(1.4 * var(--dwc-rem)) auto; max-width: 720px; }
.dwc-face-grid-2 { max-width: 480px; }
.dwc-face-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwc-face-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dwc-face-option { align-items: center; background: #fff !important; border: 2px solid var(--dwc-line) !important; border-radius: 16px !important; color: var(--dwc-ink) !important; cursor: pointer; display: flex; flex-direction: column; gap: calc(0.35 * var(--dwc-rem)); min-height: 0; overflow: hidden; padding: calc(0.7 * var(--dwc-rem)) calc(0.4 * var(--dwc-rem)) calc(0.6 * var(--dwc-rem)) !important; }
.dwc-face-option:hover { background: var(--dwc-mist) !important; border-color: var(--dwc-porch) !important; }
.dwc-face-option.is-hinted { border-color: var(--dwc-garden) !important; box-shadow: 0 0 0 3px var(--dwc-garden); }
.dwc-face-option-photo { align-items: flex-end; display: flex; height: clamp(130px, 19vw, 180px); justify-content: center; width: 100%; }
.dwc-face-option-label { font-size: 0.92em; font-weight: 800; }
.dwc-face-option.is-hinted .dwc-face-option-label { color: var(--dwc-garden); }
.dwc-face-option-text { color: var(--dwc-muted); font-size: 0.8em; line-height: 1.35; }
.dwc-answer.is-hinted { border-color: var(--dwc-garden) !important; box-shadow: inset 0 0 0 2px var(--dwc-garden); }

/* Answer feedback shows the person's face beside the explanation. */
.dwc-feedback { align-items: center; display: grid; gap: calc(1 * var(--dwc-rem)); grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
.dwc-feedback-face .dwc-face { margin: 0 auto; }
.dwc-feedback-face .dwc-face-photo { height: 180px; }
.dwc-feedback-text .dwc-button { margin-top: calc(0.6 * var(--dwc-rem)); }
.dwc-later { color: var(--dwc-muted); font-size: 0.92em; }
.dwc-scene { color: var(--dwc-porch-dark); margin-bottom: calc(0.4 * var(--dwc-rem)); }

/* Round summary: the faces met in this round */
.dwc-met-list { display: flex; flex-wrap: wrap; gap: calc(0.8 * var(--dwc-rem)); list-style: none; margin: 0; padding: 0; }
.dwc-met-list li { align-items: center; display: flex; flex-direction: column; font-size: 0.9em; font-weight: 700; gap: 4px; width: 92px; }
.dwc-mini-face { align-items: flex-end; background: var(--dwc-mist); border-radius: 50%; display: flex; height: 84px; justify-content: center; overflow: hidden; width: 84px; }
.dwc-mini-face img,
.dwc-mini-face svg { display: block; height: 94%; object-fit: contain; object-position: 50% 100%; width: auto; }

@container dwc-app (max-width: 620px) {
  .dwc-face-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwc-feedback { grid-template-columns: minmax(0, 1fr); }
  .dwc-feedback-face .dwc-face-photo { height: 160px; }
}
@container dwc-app (max-width: 420px) {
  .dwc-face-grid-3 { gap: calc(0.45 * var(--dwc-rem)); }
  .dwc-face-option-photo { height: 110px; }
  .dwc-face-photo { height: 210px; }
}
@media (max-width: 620px) {
  .dwc-face-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwc-feedback { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .dwc-face-option { forced-color-adjust: auto; }
  .dwc-face-option.is-hinted { outline: 3px solid Highlight; }
}

/* ---------------------------------------------------------------------------
   1.1.1: timer switch, countdown, Continue at the bottom right
   ------------------------------------------------------------------------ */
.dwc-actions-end { justify-content: flex-end; }
.dwc-actions-end > .dwc-button-secondary { margin-right: auto; }
.dwc-memory-shell .dwc-actions-end > .dwc-button { width: auto; }
.dwc-continue { min-width: 160px; overflow: hidden; position: relative; }
.dwc-countdown { display: none; font-variant-numeric: tabular-nums; margin-left: 0.55em; opacity: 0.9; }
.dwc-continue.is-timing .dwc-countdown { display: inline; }
.dwc-continue.is-timing::after { background: rgba(255, 255, 255, 0.85); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; transition: width 1s linear; width: calc(var(--dwc-timer-left, 1) * 100%); }
.dwc-feedback .dwc-actions { margin-top: calc(0.8 * var(--dwc-rem)); }

/* Timer switch in the header, far right */
.dwc-timer-tool { align-items: center; display: inline-flex !important; gap: 0.45em; text-decoration: none !important; }
.dwc-timer-tool > span:nth-child(2) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dwc-timer-switch { background: #b7cdca; border-radius: 999px; display: inline-block; flex: none; height: 20px; position: relative; transition: background 0.15s; width: 36px; }
.dwc-timer-switch::after { background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); content: ""; height: 16px; left: 2px; position: absolute; top: 2px; transition: left 0.15s; width: 16px; }
.dwc-timer-tool.is-on .dwc-timer-switch { background: var(--dwc-porch); }
.dwc-timer-tool.is-on .dwc-timer-switch::after { left: 18px; }
.dwc-timer-state { background: var(--dwc-mist); border-radius: 999px; font-size: 0.85em; padding: 1px 8px; }
.dwc-timer-tool.is-on .dwc-timer-state { background: var(--dwc-porch); color: #fff; }
.dwc-timer-choices { display: flex; flex-wrap: wrap; gap: 0 calc(1.4 * var(--dwc-rem)); }

@media (prefers-reduced-motion: reduce) {
  .dwc-continue.is-timing::after,
  .dwc-timer-switch,
  .dwc-timer-switch::after { transition: none; }
}
@media (forced-colors: active) {
  .dwc-timer-switch { border: 1px solid ButtonText; }
  .dwc-timer-tool.is-on .dwc-timer-switch { background: Highlight; }
}

/* ---------------------------------------------------------------------------
   1.1.2: clear timer choices
   ------------------------------------------------------------------------ */
.dwc-timer-form fieldset { margin-top: calc(1 * var(--dwc-rem)); }
.dwc-timer-form input[type="radio"],
.dwc-timer-form input[type="checkbox"] { height: 1px !important; margin: 0; opacity: 0; position: absolute; width: 1px !important; }

/* On / Off switch */
.dwc-memory-shell .dwc-timer-form .dwc-timer-toggle { align-items: center; cursor: pointer; display: inline-flex; font-size: 1.1em; font-weight: 800; gap: calc(0.7 * var(--dwc-rem)); min-height: 48px; position: relative; }
.dwc-timer-toggle .dwc-timer-switch { height: 32px; width: 58px; }
.dwc-timer-toggle .dwc-timer-switch::after { height: 26px; left: 3px; top: 3px; width: 26px; }
.dwc-timer-toggle.is-on .dwc-timer-switch { background: var(--dwc-porch); }
.dwc-timer-toggle.is-on .dwc-timer-switch::after { left: 29px; }
.dwc-timer-toggle:has(input:focus-visible) .dwc-timer-switch { outline: 4px solid var(--dwc-focus); outline-offset: 3px; }

/* Seconds: four large buttons, the chosen one filled and checked */
.dwc-timer-choices { display: grid; gap: calc(0.6 * var(--dwc-rem)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dwc-memory-shell .dwc-timer-form .dwc-timer-choice { align-items: center; background: #fff; border: 2px solid var(--dwc-line); border-radius: 14px; color: var(--dwc-ink); cursor: pointer; display: flex; flex-direction: column; gap: 0; justify-content: center; margin: 0; min-height: 84px; padding: calc(0.5 * var(--dwc-rem)) calc(0.25 * var(--dwc-rem)); position: relative; text-align: center; }
.dwc-timer-choice strong { font-family: var(--dwc-serif) !important; font-size: 1.7em; line-height: 1.1; }
.dwc-timer-choice > span:last-child { font-size: 0.8em; font-weight: 700; }
.dwc-timer-choice:hover { border-color: var(--dwc-porch); }
.dwc-memory-shell .dwc-timer-form .dwc-timer-choice.is-selected { background: var(--dwc-porch); border-color: var(--dwc-porch-dark); box-shadow: 0 0 0 4px rgba(31, 102, 112, 0.28); color: #fff; }
.dwc-timer-check { background: #fff; border-radius: 50%; color: var(--dwc-porch); display: none; font-size: 0.75em; font-weight: 900; height: 22px; line-height: 22px; position: absolute; right: 6px; top: 6px; width: 22px; }
.dwc-timer-choice.is-selected .dwc-timer-check { display: block; }
.dwc-timer-choice:has(input:focus-visible) { outline: 4px solid var(--dwc-focus); outline-offset: 3px; }

@media (forced-colors: active) {
  .dwc-memory-shell .dwc-timer-form .dwc-timer-choice.is-selected { background: Highlight; color: HighlightText; }
}


/* ----------------------------------------------------------------------
   1.1.4 Round summary: celebration banner, fireworks, balanced layout
   ---------------------------------------------------------------------- */
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary { text-align: center; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-celebrate {
  background: #fffaf0;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--dwc-medal, #1f6670) 16%, #ffffff) 0%, #fffdf7 62%, #ffffff 100%);
  border: 1px solid color-mix(in srgb, var(--dwc-medal, #1f6670) 30%, #ffffff);
  border-radius: 22px;
  min-height: calc(14 * var(--dwc-rem));
  overflow: hidden;
  padding: calc(1.6 * var(--dwc-rem)) calc(1.2 * var(--dwc-rem)) calc(1.5 * var(--dwc-rem));
  position: relative;
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-fireworks {
  display: block; height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 0;
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-celebrate-text { position: relative; z-index: 1; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-celebrate .dwc-screen-title,
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-celebrate-sub { text-shadow: 0 0 10px #ffffff, 0 0 3px #ffffff; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-medal {
  align-items: center;
  animation: dwc-medal-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  background: var(--dwc-medal, #1f6670);
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--dwc-medal, #1f6670), 0 10px 22px rgba(23, 51, 59, 0.18);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  font-family: var(--dwc-serif);
  font-size: calc(2.1 * var(--dwc-rem));
  font-weight: 700;
  height: calc(5.4 * var(--dwc-rem));
  justify-content: center;
  line-height: 1;
  margin: 0 auto calc(0.9 * var(--dwc-rem));
  width: calc(5.4 * var(--dwc-rem));
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-medal small {
  font-family: var(--dwc-font); font-size: calc(0.68 * var(--dwc-rem)); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 3px; text-transform: uppercase;
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-screen-title {
  animation: dwc-rise 0.6s 0.15s ease-out both; margin: 0 0 calc(0.3 * var(--dwc-rem));
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-celebrate-sub {
  animation: dwc-rise 0.6s 0.3s ease-out both; color: var(--dwc-ink); font-size: 1.12em; font-weight: 700; margin: 0;
}
@keyframes dwc-medal-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes dwc-rise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-results {
  grid-template-columns: repeat(3, minmax(0, 1fr)); margin: calc(1.2 * var(--dwc-rem)) 0;
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-results p {
  align-items: center; display: flex; flex-direction: column; justify-content: center; padding: calc(1 * var(--dwc-rem)) calc(0.6 * var(--dwc-rem));
}

.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-grid {
  align-items: stretch; display: grid; gap: calc(0.8 * var(--dwc-rem)); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-card {
  display: flex; flex-direction: column;
  background: #ffffff; border: 1px solid var(--dwc-line); border-radius: 16px; padding: calc(1 * var(--dwc-rem)) calc(1 * var(--dwc-rem)) calc(1.2 * var(--dwc-rem));
}
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-card .dwc-subtitle { font-size: 1.08em; margin: 0 0 calc(0.8 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-met-list { justify-content: center; margin: auto 0; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-card .dwc-achievements { margin: auto 0; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-met-list { gap: calc(0.6 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-met-list li { width: 76px; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-mini-face { height: 68px; width: 68px; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-achievements { align-items: center; flex-direction: column; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-achievements li { font-size: 0.92em; justify-content: center; max-width: 100%; text-align: center; }

.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-actions { justify-content: center; margin-top: calc(1.4 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-actions > .dwc-button { width: auto; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-foot { margin: calc(0.5 * var(--dwc-rem)) 0 0; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-note {
  color: var(--dwc-muted); font-size: 0.82em; margin: calc(0.6 * var(--dwc-rem)) auto 0; max-width: 34em;
}

@container dwc-app (max-width: 620px) {
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-results strong { font-size: 1.4em; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-results span { font-size: 0.76em; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-results p { padding: calc(0.8 * var(--dwc-rem)) calc(0.4 * var(--dwc-rem)); }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-achievements { flex-direction: row; justify-content: center; }
}
@container dwc-app (max-width: 420px) {
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary .dwc-results { gap: calc(0.5 * var(--dwc-rem)); }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-summary-actions > .dwc-button { width: 100%; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-celebrate { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-fireworks { display: none; }
}
@media (forced-colors: active) {
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-fireworks { display: none; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-medal { border: 2px solid CanvasText; forced-color-adjust: auto; }
}


/* 1.1.5 Welcome and Help: one column welcome without the street picture, numbered help steps */
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome .dwc-lead-pace { margin-top: calc(0.6 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-dialog ol.dwc-help-steps { list-style: decimal; margin: 0 0 calc(1 * var(--dwc-rem)); padding: 0 0 0 calc(1.5 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-dialog ol.dwc-help-steps li { display: list-item; list-style: decimal; margin: 0 0 calc(0.6 * var(--dwc-rem)); padding-left: calc(0.25 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-dialog ol.dwc-help-steps li::before { content: none; }


/* 1.1.6 Smaller welcome title (owner request) */
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome .dwc-screen-title { font-size: clamp(calc(1.6 * var(--dwc-rem)), 4.5cqi, calc(2.25 * var(--dwc-rem))); }


/* 1.1.7 Welcome layout: uses the width of the game area and sits in the middle top to bottom.
   Title across the top, introduction on the left, the About this activity note on the right,
   buttons underneath. One column again when the game is narrower than 760px. */
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-main:has(> .dwc-welcome) { display: flex; flex-direction: column; justify-content: center; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome { max-width: 980px; width: 100%; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy { align-items: start; column-gap: clamp(calc(2 * var(--dwc-rem)), 5cqi, calc(4 * var(--dwc-rem))); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-screen-title { grid-column: 1 / -1; margin-bottom: calc(1 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-lead { grid-column: 1; max-width: none; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-safety { background: rgba(255, 255, 255, 0.72); border-radius: 0 calc(0.75 * var(--dwc-rem)) calc(0.75 * var(--dwc-rem)) 0; grid-column: 2; grid-row: 2 / span 2; margin: calc(0.3 * var(--dwc-rem)) 0 0; max-width: none; padding: calc(0.9 * var(--dwc-rem)) calc(1.1 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-safety p { margin: 0; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-actions { grid-column: 1 / -1; margin-top: calc(2 * var(--dwc-rem)); }
@container dwc-app (max-width: 760px) {
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy { display: block; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-safety { margin: calc(1.6 * var(--dwc-rem)) 0; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-welcome-copy > .dwc-actions { margin-top: calc(1.5 * var(--dwc-rem)); }
}


/* 1.1.8 Text and display: the chosen options are easy to see.
   Text size: three option buttons; the chosen one is filled teal with white text and a check mark.
   On/off options: a solid box that fills teal with a white check, and the whole row is tinted.
   The site theme gives inputs a faint 1px border and a pale dot, so those are replaced here. */
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form fieldset { display: grid; gap: calc(0.6 * var(--dwc-rem)); grid-template-columns: repeat(auto-fit, minmax(calc(7.5 * var(--dwc-rem)), 1fr)); margin-bottom: calc(1.4 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form legend { margin-bottom: calc(0.6 * var(--dwc-rem)); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form label { background: #ffffff; border: 2px solid var(--dwc-line); border-radius: calc(0.75 * var(--dwc-rem)); color: var(--dwc-ink); cursor: pointer; font-weight: 600; margin: 0 0 calc(0.6 * var(--dwc-rem)); padding: calc(0.6 * var(--dwc-rem)) calc(0.85 * var(--dwc-rem)); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form fieldset label { margin: 0; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form label:hover { border-color: var(--dwc-porch); }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form label:has(input:focus-visible) { outline: 3px solid var(--dwc-focus); outline-offset: 2px; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="radio"], .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="checkbox"] { -webkit-appearance: none; appearance: none; background: #ffffff; border: 2px solid var(--dwc-porch); box-shadow: none; flex: 0 0 22px; height: 22px; margin: 0; outline: none; width: 22px; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="radio"] { border-radius: 50%; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="checkbox"] { border-radius: 6px; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="radio"]::before, .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="radio"]::after, .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="checkbox"]::before, .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="checkbox"]::after { content: none !important; display: none !important; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form fieldset label:has(input:checked) { background: var(--dwc-porch); border-color: var(--dwc-porch); box-shadow: 0 0 0 3px rgba(31, 102, 112, 0.28); color: #ffffff; font-weight: 800; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form fieldset label:has(input:checked)::after { content: "\2713"; content: "\2713" / ""; font-weight: 800; margin-left: auto; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="radio"]:checked { background: radial-gradient(circle, var(--dwc-porch) 0 4px, #ffffff 4.5px); border-color: #ffffff; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form label.dwc-switch:has(input:checked) { background: var(--dwc-mist); border-color: var(--dwc-porch); font-weight: 800; }
.dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="checkbox"]:checked { background: var(--dwc-porch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat; border-color: var(--dwc-porch); }
@media (forced-colors: active) {
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="radio"], .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
  .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form label:has(input:checked) { border: 3px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) { .dwc-memory-shell[data-dwc-meet-neighbors] .dwc-settings-form label { transition: none; } }