:root {
  color-scheme: light dark;
  --background: #f5f3ee;
  --foreground: #25231f;
  --surface: #ffffff;
  --surface-muted: #ebe7de;
  --accent: #785b32;
  --border: #c9c2b5;
  --existence-counter-color: #b4232c;
  --emptiness-counter-color: #686868;
}

.logic-game__interactive-diagram {
  position: relative;
  width: min(100%, 32rem);
  margin-inline: auto;
}

.logic-game__interactive-diagram .logic-game__svg-container,
.logic-game__interactive-diagram .carroll-diagram {
  width: 100%;
  margin: 0;
}

.logic-game__counter-target-overlay {
  position: absolute;
  inset: 0;
}

.logic-game__counter-target {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, Canvas 22%, transparent);
  transform: translate(-50%, -50%);
}

.logic-game__counter-target:hover,
.logic-game__counter-target:focus-visible {
  border-style: solid;
  outline: 3px solid Highlight;
  outline-offset: 2px;
  background: color-mix(in srgb, Highlight 22%, transparent);
}

.logic-game__counter-target--locked {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

.logic-game__counter-tools,
.logic-game__counter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-block: 1rem;
}

.logic-game__counter-tools [aria-pressed="true"] {
  border-width: 3px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.logic-game__counter-feedback {
  padding: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 0.5rem;
}

.logic-game__counter-feedback--correct::before {
  content: "✓ ";
}

.logic-game__counter-feedback--incorrect::before {
  content: "× ";
}

.logic-game__conclusion-quiz {
  padding: 1rem;
  border: 2px solid currentColor;
  border-radius: 0.75rem;
}

.logic-game__conclusion-quiz label {
  display: grid;
  gap: 0.35rem;
  margin-block: 1rem;
}

.logic-game__conclusion-quiz select {
  width: min(100%, 38rem);
  min-height: 2.75rem;
}

.logic-game__conclusion-quiz-feedback {
  padding: 0.75rem;
  border-inline-start: 0.35rem solid currentColor;
}

.logic-game__conclusion-quiz-feedback--correct::before {
  content: "✓ ";
}

.logic-game__conclusion-quiz-feedback--incorrect::before,
.logic-game__conclusion-quiz-feedback--incomplete::before {
  content: "× ";
}

.logic-game__saved-custom-problems {
  padding: 1rem;
  border: 2px solid currentColor;
  border-radius: 0.75rem;
}

.logic-game__saved-custom-problems fieldset {
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid currentColor;
}

.logic-game__saved-custom-problems fieldset > label {
  display: grid;
  gap: 0.35rem;
  margin-block: 1rem;
}

.logic-game__saved-custom-problems input {
  min-height: 2.75rem;
  width: min(100%, 36rem);
}

.logic-game__saved-custom-problem-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.logic-game__saved-custom-problem-list > li {
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
}

.logic-game__saved-custom-problem-list button,
.logic-game__saved-custom-problems fieldset > button {
  margin: 0.25rem;
}

.logic-game__saved-custom-problem-list
  [data-action="delete-saved-custom-problem"]::before {
  content: "⚠ ";
}

.logic-game__saved-custom-problem-feedback,
.logic-game__saved-custom-problem-warning {
  padding: 0.75rem;
  border-inline-start: 0.35rem solid currentColor;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(1.5rem, 6vw, 4rem) 1rem;
  color: var(--foreground);
  background: var(--background);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

#app,
noscript {
  display: block;
  width: min(100%, 64rem);
  margin-inline: auto;
}

.logic-game {
  min-width: 0;
  display: grid;
  gap: 1.25rem;
}
.logic-game > *, .logic-game__settings > *, .logic-game__main > section { min-width: 0; }

.logic-game__main {
  display: grid;
  min-width: 0;
  gap: 1.25rem;
}

.logic-game__header,
.logic-game__settings,
.logic-game__main > section,
.logic-game__progress,
.logic-game__controls {
  padding: clamp(1rem, 4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.logic-game__settings {
  display: block;
  gap: 1rem;
}

.logic-game__settings > * {
  margin-block-end: 1rem;
}

.logic-game__settings > h2 {
  grid-column: 1 / -1;
}

@supports (display: grid) {
  .logic-game__settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .logic-game__settings > * {
    margin-block-end: 0;
  }
}

.logic-game__settings label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.logic-game__selector-description {
  max-width: 40rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.logic-game__settings select {
  min-height: 2.75rem;
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  color: var(--foreground);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 0.35rem;
  font: inherit;
}

.logic-game__settings select:focus-visible {
  outline: 0.2rem solid var(--accent);
  outline-offset: 0.15rem;
}

.logic-game__header {
  border-top: 0.3rem solid var(--accent);
}

.logic-game h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.logic-game h2 {
  margin-top: 0;
}

.logic-game__phase-heading {
  margin: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  max-width: calc(100vw - 1rem);
  padding: 0.75rem 1rem;
  color: CanvasText;
  background: Canvas;
  border: 3px solid currentColor;
  border-radius: 0.35rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.skip-link--inline {
  position: static;
  inset: auto;
  transform: none;
}

button,
select,
input,
.skip-link {
  min-height: 2.75rem;
  max-width: 100%;
  font: inherit;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
.skip-link:focus-visible,
[tabindex="-1"]:focus-visible {
  outline: 0.2rem solid Highlight;
  outline-offset: 0.2rem;
}

.logic-game__progress ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logic-game__progress li {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  text-align: center;
}

.logic-game__progress .is-current {
  border-width: 2px;
  border-color: var(--accent);
  font-weight: 700;
}

.logic-game__progress .is-complete::before {
  content: "✓ ";
}

.logic-game__assignment dl {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0.35rem 1rem;
  margin-bottom: 0;
}

.logic-game__assignment dt {
  font-weight: 700;
}

.logic-game__assignment dd {
  margin: 0;
}

.logic-game__custom-problem fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
}

.logic-game__custom-problem legend {
  padding-inline: 0.4rem;
  font-weight: 700;
}

.logic-game__custom-problem fieldset label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.logic-game__custom-problem fieldset .logic-game__complement-control {
  display: flex;
  align-items: center;
  align-self: end;
  min-height: 2.75rem;
  gap: 0.5rem;
}

.logic-game__complement-control input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.logic-game__custom-problem select,
.logic-game__custom-problem button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 0.35rem;
  font: inherit;
}

.logic-game__custom-problem :focus-visible {
  outline: 0.2rem solid var(--accent);
  outline-offset: 0.15rem;
}

.logic-game__custom-problem-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.logic-game__custom-problem-actions button:first-child {
  border-color: var(--accent);
  font-weight: 700;
}

.logic-game__custom-problem-feedback {
  padding: 0.75rem 1rem;
  background: var(--surface-muted);
  border-left: 0.25rem solid var(--accent);
}

.logic-game__custom-problem-feedback--success::before {
  content: "✓ ";
  font-weight: 700;
}

.logic-game__custom-problem-feedback--error::before {
  content: "! ";
  font-weight: 700;
}

.logic-game__custom-terms {
  border-left: 0.3rem solid var(--accent);
}

.logic-game__custom-terms fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
}

.logic-game__custom-terms legend {
  padding-inline: 0.4rem;
  font-weight: 700;
}

.logic-game__custom-terms label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.logic-game__custom-terms input,
.logic-game__custom-terms button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 0.35rem;
  font: inherit;
}

.logic-game__custom-terms :focus-visible {
  outline: 0.2rem solid var(--accent);
  outline-offset: 0.15rem;
}

.logic-game__custom-term-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.logic-game__custom-term-list li {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
}

.logic-game__custom-term-list dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
}

.logic-game__custom-term-list dd {
  margin: 0;
}

.logic-game__custom-term-list [data-action="delete-custom-term"] {
  border-style: dashed;
}

.logic-game__custom-term-feedback,
.logic-game__custom-term-warning {
  padding: 0.75rem 1rem;
  background: var(--surface-muted);
  border-left: 0.25rem solid var(--accent);
}

.logic-game__custom-term-feedback--success::before {
  content: "✓ ";
  font-weight: 700;
}

.logic-game__custom-term-feedback--error::before,
.logic-game__custom-term-warning::before {
  content: "! ";
  font-weight: 700;
}

.logic-game__instruction {
  padding: 0.75rem 1rem;
  background: var(--surface-muted);
  border-left: 0.25rem solid var(--accent);
}

.logic-game figure {
  margin: 0;
}

.logic-game figcaption {
  margin-top: 0.75rem;
  text-align: center;
}

.logic-game__svg-container {
  color: var(--foreground);
}

.carroll-diagram {
  display: block;
  width: min(100%, 32rem);
  height: auto;
  margin-inline: auto;
}

.carroll-counter--existence {
  color: var(--existence-counter-color);
}

.carroll-counter--emptiness {
  color: var(--emptiness-counter-color);
}

.logic-game__conclusion {
  border-width: 2px;
  border-color: var(--accent);
}

.logic-game__abstract-conclusion {
  font-weight: 700;
}

.logic-game__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.logic-game__controls button {
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  color: var(--foreground);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 0.35rem;
  font: inherit;
  cursor: pointer;
}

.logic-game__controls button:focus-visible {
  outline: 0.2rem solid var(--foreground);
  outline-offset: 0.2rem;
}

.logic-game__controls button:disabled {
  border-style: dashed;
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 38rem) {
  .logic-game__settings {
    grid-template-columns: 1fr;
  }

  .logic-game__custom-problem fieldset {
    grid-template-columns: 1fr;
  }

  .logic-game__custom-terms fieldset {
    grid-template-columns: 1fr;
  }

  .logic-game__progress ol {
    grid-template-columns: 1fr 1fr;
  }
}

@media (forced-colors: active) {
  .logic-game__progress .is-current,
  [aria-pressed="true"],
  .logic-game__counter-feedback,
  .logic-game__conclusion-quiz-feedback,
  .logic-game__warning {
    border: 3px solid CanvasText;
  }

  .logic-game__counter-target:focus-visible {
    outline: 4px solid Highlight;
  }

  .carroll-counter--existence,
  .carroll-counter--emptiness {
    forced-color-adjust: auto;
  }
}

/* Alice through the looking-glass theme */
:root {
  color-scheme: light;
  --alice-page-top: #e8f5fb;
  --alice-page-bottom: #cfe7f3;
  --alice-surface: rgba(250, 253, 255, 0.92);
  --alice-surface-solid: #f8fcfe;
  --alice-surface-soft: rgba(229, 243, 250, 0.88);
  --alice-border: #a9cadb;
  --alice-border-strong: #78a9c2;
  --alice-primary: #477f9f;
  --alice-primary-hover: #376d8c;
  --alice-primary-active: #2d5d77;
  --alice-heading: #294f65;
  --alice-text: #243b48;
  --alice-muted: #587381;
  --alice-focus: #175f88;
  --alice-shadow: rgba(47, 91, 113, 0.16);
  --background: var(--alice-page-top);
  --foreground: var(--alice-text);
  --surface: var(--alice-surface-solid);
  --surface-muted: var(--alice-surface-soft);
  --accent: var(--alice-primary);
  --border: var(--alice-border);
}

html { overflow-x: hidden; background: var(--alice-page-bottom); }
body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 9%, rgba(255,255,255,.9), transparent 28rem),
    radial-gradient(ellipse at 78% 38%, rgba(255,255,255,.42), transparent 35rem),
    linear-gradient(165deg, var(--alice-page-top), var(--alice-page-bottom));
}
#app, noscript { position: relative; z-index: 1; }
.logic-game {
  padding: clamp(.5rem, 2vw, 1.25rem);
  background: var(--alice-surface);
  border: 1px solid rgba(120,169,194,.58);
  border-radius: .85rem;
  box-shadow: 0 18px 48px var(--alice-shadow), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(5px);
}
.logic-game__header,
.logic-game__settings,
.logic-game__main > section,
.logic-game__progress,
.logic-game__controls {
  background: linear-gradient(100deg, var(--alice-surface-solid), rgba(237,247,252,.94));
  border-color: var(--alice-border);
  border-radius: .7rem;
  box-shadow: inset 0 1px rgba(255,255,255,.95);
}
.logic-game__header {
  background: linear-gradient(100deg, rgba(247,252,255,.98), rgba(210,235,247,.9), rgba(247,252,255,.98));
  border-top-color: var(--alice-border-strong);
  border-bottom-color: rgba(255,255,255,.95);
}
.logic-game h1, .logic-game h2, .logic-game h3 { color: var(--alice-heading); }
.logic-game h1 { font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .025em; }
.logic-game__tutorial-link, .logic-game a { color: var(--alice-primary-active); text-underline-offset: .18em; }
.logic-game__header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.logic-game__header-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .75rem; border: 1px solid var(--alice-border-strong); border-radius: 999px; background: rgba(255,255,255,.6); color: var(--alice-primary-active); }
.logic-game__header-link:hover { border-color: var(--alice-primary-hover); background: var(--alice-surface-soft); }
.logic-game__header-link:active { border-color: var(--alice-primary-active); background: #d8edf7; }
.logic-game__header-link:focus-visible { outline: 3px solid var(--alice-focus); outline-offset: 3px; }

button, select, input { color: var(--alice-text); border-color: var(--alice-border-strong); background-color: var(--alice-surface-solid); }
button { padding: .55rem .9rem; border: 2px solid var(--alice-primary); border-radius: .4rem; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--alice-primary-hover); background: var(--alice-surface-soft); }
button:active:not(:disabled) { border-color: var(--alice-primary-active); background: #d8edf7; }
button:disabled { color: var(--alice-muted); background: #e3edf2; border-color: #9eb6c2; opacity: 1; cursor: not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, .skip-link:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--alice-focus);
  outline-offset: 3px;
}
[aria-invalid="true"] { border-color: #9b3434; box-shadow: inset 0 0 0 1px #9b3434; }
.logic-game__controls button:not(:disabled), .logic-game__custom-problem-actions button:first-child {
  color: #fff; background: var(--alice-primary); border-color: var(--alice-primary);
}
.logic-game__controls button:hover:not(:disabled), .logic-game__custom-problem-actions button:first-child:hover { background: var(--alice-primary-hover); }
.logic-game__controls button:active:not(:disabled), .logic-game__custom-problem-actions button:first-child:active { background: var(--alice-primary-active); }
.logic-game__progress { background: linear-gradient(90deg, var(--alice-surface-soft), #fff, var(--alice-surface-soft)); }
.logic-game__progress li { background: rgba(255,255,255,.68); }
.logic-game__progress .is-complete { border-color: var(--alice-border-strong); background: #e2f1f8; }
.logic-game__progress .is-current { border: 3px double var(--alice-primary-active); background: #fff; color: var(--alice-heading); font-weight: 700; box-shadow: 0 2px 8px var(--alice-shadow); }
.logic-game__progress .is-current::after { content: " ◆"; font-size: .7em; }
.logic-game__progress .is-upcoming { color: var(--alice-muted); border-style: dashed; }
.logic-game__instruction, .logic-game__custom-problem-feedback, .logic-game__custom-term-feedback, .logic-game__custom-term-warning { background: var(--alice-surface-soft); }
.logic-game__svg-container, .logic-game__interactive-diagram { background: #fff; border: 1px solid var(--alice-border); border-radius: .5rem; }
.carroll-diagram { color: #243b48; }
.logic-game__data-backup { background: var(--alice-surface-soft); border-color: var(--alice-border); }
.logic-game__data-backup-action { background: var(--alice-surface-solid); }

@media (max-width: 38rem) {
  body { padding: .75rem .5rem; }
  .logic-game { padding: .4rem; border-radius: .6rem; }
  .logic-game__header, .logic-game__settings, .logic-game__main > section, .logic-game__progress, .logic-game__controls { padding: 1rem; }
  button, select, input { white-space: normal; overflow-wrap: anywhere; }
  .logic-game h1, .logic-game h2, .logic-game h3, .logic-game p, .logic-game label { overflow-wrap: anywhere; }
}
@media (prefers-contrast: more) {
  :root { --alice-surface: #fff; --alice-surface-soft: #e3f2f8; --alice-border: #547f96; --alice-muted: #365667; }
  .logic-game, .logic-game__header, .logic-game__settings, .logic-game__main > section { backdrop-filter: none; }
}
@media print {
  :root { --foreground: #111; --surface: #fff; --surface-muted: #fff; }
  html, body { background: #fff !important; color: #111; }
  .logic-game, .logic-game__header, .logic-game__settings, .logic-game__main > section, .logic-game__progress, .logic-game__controls { background: #fff; box-shadow: none; backdrop-filter: none; border-color: #777; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

.logic-game__data-backup {
  margin-block: 1.25rem;
  padding: 1rem;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, Canvas 94%, #4b7bec 6%);
}

.logic-game__data-backup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 1.25rem;
}

.logic-game__data-backup-action {
  padding: 1rem;
  border: 1px solid var(--border);
  border-block-start-width: 0.4rem;
  border-radius: 0.6rem;
  background: var(--surface);
}

.logic-game__data-backup-action--export {
  border-block-start-color: #287a3d;
}

.logic-game__data-backup-action--import {
  border-block-start-color: #3169a8;
}

.logic-game__data-backup-action h3 {
  margin-block-start: 0;
}

.logic-game__data-backup-action--export h3::before {
  content: "↓ ";
  color: #287a3d;
  font-size: 1.25em;
}

.logic-game__data-backup-action--import h3::before {
  content: "↑ ";
  color: #3169a8;
  font-size: 1.25em;
}

.logic-game__data-backup-primary-action {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 2px solid #287a3d;
  border-radius: 0.4rem;
  font-weight: 700;
}

.logic-game__data-backup-file-label {
  display: block;
  font-weight: 700;
}

.logic-game__data-backup input[type="file"] {
  display: block;
  width: 100%;
  margin-block: 0.4rem;
  padding: 0.55rem;
  border: 1px solid currentColor;
  border-radius: 0.4rem;
}

.logic-game__data-backup input[type="file"]::file-selector-button {
  min-height: 2.75rem;
  margin-inline-end: 0.75rem;
  padding: 0.5rem 0.8rem;
  border: 2px solid #3169a8;
  border-radius: 0.35rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.logic-game__data-backup-file-help {
  margin-block-end: 0;
  font-size: 0.9rem;
}

.logic-game__data-import-preview {
  margin-block-start: 1rem;
  padding: 0.9rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
}

.logic-game__data-import-preview dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 0.8rem;
}

.logic-game__data-import-preview dd {
  margin: 0;
  font-weight: 700;
}

.logic-game__warning,
.logic-game__data-import-status--error {
  border-inline-start: 0.35rem solid #a33;
  padding-inline-start: 0.7rem;
  font-weight: 700;
}

.logic-game__data-import-status--success {
  border-inline-start: 0.35rem solid #287a3d;
  padding-inline-start: 0.7rem;
  font-weight: 700;
}

.logic-game__danger-action::before {
  content: "⚠ ";
}

@media (max-width: 38rem) {
  .logic-game__data-backup-actions {
    grid-template-columns: 1fr;
  }

  .logic-game__data-backup-primary-action {
    width: 100%;
  }

  .logic-game__data-import-preview button {
    display: block;
    width: 100%;
    margin-block: 0.5rem;
  }
}
.logic-game__custom-term-form,
.logic-game__custom-term-group {
  display: grid;
  gap: 0.75rem;
}

.logic-game__custom-term-group--current {
  border-width: 2px;
}

.logic-game__custom-term-group--optional {
  border-style: dashed;
}

.logic-game__custom-term-help,
.logic-game__fallback-badge {
  overflow-wrap: anywhere;
}

.logic-game__custom-term-summary,
.logic-game__term-management,
.logic-game__term-management .logic-game__custom-terms {
  display: grid;
  gap: 0.75rem;
}

.logic-game__custom-term-summary {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.logic-game__custom-term-summary > *,
.logic-game__term-management-count {
  margin-block: 0;
}

.logic-game__custom-term-summary button,
.logic-game__term-management-back {
  max-width: 100%;
  justify-self: start;
  white-space: normal;
}

.logic-game__term-management .logic-game__custom-term-list li,
.logic-game__term-management .logic-game__custom-term-list dd {
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .logic-game__term-management .logic-game__custom-term-list button {
    display: block;
    width: 100%;
    margin-block-start: 0.5rem;
  }
}

.logic-game__fallback-badge {
  display: block;
  margin-block: 0.25rem;
  font-size: 0.875em;
}

@media (forced-colors: active) {
  .logic-game__custom-term-summary {
    border-color: CanvasText;
  }
  .logic-game__custom-term-group--optional {
    border-color: CanvasText;
  }
  .logic-game__fallback-badge {
    border: 1px solid CanvasText;
    padding: 0.125rem 0.25rem;
  }
}