/* =============================================================================
   Bonds — letter inventory and directed-connection daily game
   ============================================================================= */

.bonds-page {
  --bonds-node-size: 48px;
  --bonds-link-size: 30px;
  --bonds-row-gap: 5px;
  --bonds-key-gap: 5px;

  max-width: 44rem;
  overflow-x: clip;
}

.bonds-page-header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.bonds-page-header .page-header__subtitle {
  max-width: 36rem;
  margin-inline: auto;
}

.bonds-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.bonds-game {
  width: min(100%, 41rem);
  margin: 0 auto var(--space-6);
  padding: var(--space-4);
  overflow: hidden;
}

.bonds-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  width: min(100%, 20rem);
  margin: 0 auto var(--space-2);
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.bonds-mode-button {
  min-height: 38px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-lg) - 3px);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.bonds-mode-button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

.bonds-mode-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.bonds-mode-note {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.bonds-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.bonds-puzzle-label,
.bonds-attempt-label {
  margin: 0;
  font-size: var(--text-sm);
}

.bonds-puzzle-label {
  font-family: var(--font-display);
  font-weight: 700;
}

.bonds-attempt-label {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bonds-meta-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.bonds-text-button {
  min-height: 32px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.bonds-text-button:hover {
  border-bottom-color: currentColor;
}

.bonds-text-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.bonds-status {
  min-height: 2.7em;
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: center;
}

.bonds-status[data-tone="error"] {
  color: var(--danger);
}

.bonds-status[data-tone="success"] {
  color: var(--success);
  font-weight: 700;
}

.bonds-game-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: calc(-1 * var(--space-1)) 0 var(--space-3);
}

.bonds-game-tools .btn {
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.bonds-hint-cost {
  max-width: 16rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.bonds-hint-button:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}

.bonds-hint-confirm,
.bonds-new-practice-confirm {
  margin: 0 auto var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  text-align: center;
}

.bonds-hint-confirm[hidden],
.bonds-new-practice-confirm[hidden] {
  display: none;
}

.bonds-hint-confirm p,
.bonds-new-practice-confirm p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.bonds-hint-confirm > div,
.bonds-new-practice-confirm > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------- board */

.bonds-play-area {
  display: grid;
  grid-template-areas:
    "board"
    "knowledge"
    "keyboard";
  min-width: 0;
}

.bonds-board {
  grid-area: board;
  display: grid;
  gap: var(--bonds-row-gap);
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--space-3);
}

.bonds-row {
  display: grid;
  grid-template-columns:
    var(--bonds-node-size) var(--bonds-link-size)
    var(--bonds-node-size) var(--bonds-link-size)
    var(--bonds-node-size) var(--bonds-link-size)
    var(--bonds-node-size) var(--bonds-link-size)
    var(--bonds-node-size);
  align-items: center;
  width: max-content;
  max-width: 100%;
  perspective: 900px;
}

.bonds-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bonds-node-size);
  height: var(--bonds-node-size);
  border: 2px solid var(--tile-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: calc(var(--bonds-node-size) * 0.43);
  font-weight: 700;
  line-height: 1;
  transform-style: preserve-3d;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
}

.bonds-node__letter {
  position: relative;
  z-index: 1;
}

.bonds-node__mark {
  position: absolute;
  top: 1px;
  right: 4px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.bonds-node--filled {
  border-color: var(--muted);
}

.bonds-row--editing .bonds-node {
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.bonds-row--editing .bonds-node--filled {
  animation: bonds-type 100ms ease-out;
}

.bonds-row--editing .bonds-node:not(.bonds-node--filled):first-of-type,
.bonds-row--editing .bonds-node--filled + .bonds-connector + .bonds-node:not(.bonds-node--filled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.bonds-row--locked .bonds-node {
  border-color: var(--accent);
  background: var(--panel-2);
}

.bonds-row--hint .bonds-node {
  border-style: dashed;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-muted);
}

.bonds-row--hint .bonds-node--hint {
  border-style: solid;
  background: var(--accent);
  color: var(--on-accent);
}

.bonds-row--hint .bonds-connector {
  color: var(--accent);
  opacity: 0.45;
}

.bonds-node--in {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-green);
}

.bonds-node--out {
  border: 2px dashed var(--absent);
  background: var(--surface);
  color: var(--text-muted);
}

.bonds-node--out .bonds-node__letter {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.bonds-connector {
  position: relative;
  display: block;
  width: var(--bonds-link-size);
  height: var(--bonds-node-size);
  color: var(--border);
}

.bonds-connector__line {
  position: absolute;
  top: 50%;
  left: 2px;
  right: 5px;
  border-top: 2px solid currentColor;
  transform: translateY(-50%);
}

.bonds-connector__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-55%);
}

.bonds-connector__mark {
  position: absolute;
  top: 1px;
  left: 50%;
  z-index: 2;
  padding: 0 2px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
}

.bonds-connector--filled {
  color: var(--muted);
}

.bonds-row--locked .bonds-connector--filled {
  color: var(--accent);
}

.bonds-connector--in {
  color: var(--correct);
}

.bonds-connector--in .bonds-connector__line {
  border-top-width: 4px;
  border-top-style: solid;
}

.bonds-connector--in .bonds-connector__arrow {
  font-size: 22px;
}

.bonds-connector--out {
  color: var(--absent);
}

.bonds-connector--out .bonds-connector__line {
  border-top-style: dotted;
  border-top-width: 3px;
}

.bonds-connector--out .bonds-connector__arrow {
  opacity: 0.58;
}

.bonds-node--reveal {
  animation: bonds-node-reveal 110ms ease-in-out;
}

.bonds-connector--reveal {
  animation: bonds-link-reveal 90ms ease-in-out;
}

.bonds-row--shake {
  animation: bonds-shake 300ms ease-in-out;
}

@keyframes bonds-type {
  0% { transform: scale(0.92); }
  65% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes bonds-node-reveal {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

@keyframes bonds-link-reveal {
  0% { opacity: 0.25; transform: scaleX(0.55); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes bonds-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* ----------------------------------------------------------- known evidence */

.bonds-knowledge {
  grid-area: knowledge;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.bonds-inventory,
.bonds-known {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.bonds-inventory h2,
.bonds-known h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.bonds-inventory-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
}

.bonds-inventory-line + .bonds-inventory-line {
  margin-top: var(--space-1);
}

.bonds-knowledge-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bonds-letter-list,
.bonds-known-chains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.bonds-letter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
}

.bonds-letter-chip--in {
  border: 1px solid var(--correct);
  background: var(--correct);
  color: var(--on-green);
}

.bonds-letter-chip--out {
  border: 1px dashed var(--absent);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: line-through;
}

.bonds-empty-knowledge {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

.bonds-chain {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--correct) 60%, var(--border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--correct) 8%, var(--surface));
}

.bonds-chain__node {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--correct);
  color: var(--on-green);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
}

.bonds-chain__arrow {
  flex: 0 1 13px;
  min-width: 8px;
  color: var(--correct);
  font-weight: 900;
  text-align: center;
}

/* ------------------------------------------------------------------ keyboard */

.bonds-keyboard {
  grid-area: keyboard;
  display: grid;
  gap: var(--bonds-key-gap);
  width: min(100%, 32rem);
  margin: var(--space-3) auto 0;
  padding: var(--space-1) 0;
  user-select: none;
}

.bonds-key-row {
  display: flex;
  justify-content: center;
  gap: var(--bonds-key-gap);
}

.bonds-key-row--middle {
  padding-inline: 4.5%;
}

.bonds-key {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--btn);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.bonds-key--wide {
  flex-grow: 1.55;
  font-size: 10px;
}

.bonds-key:hover:not(:disabled) {
  background: var(--btnHover);
  transform: translateY(-1px);
}

.bonds-key:active:not(:disabled) {
  transform: translateY(1px);
}

.bonds-key:focus-visible {
  z-index: 2;
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.bonds-key:disabled {
  cursor: default;
}

.bonds-game[aria-busy="true"] .bonds-key {
  opacity: var(--disabled-opacity);
}

.bonds-key--in {
  border: 2px solid var(--correct);
  background: var(--correct);
  color: var(--on-green);
}

.bonds-key--in::after,
.bonds-key--out::after {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 9px;
  font-weight: 900;
}

.bonds-key--in::after {
  content: "\2713";
}

.bonds-key--out {
  border: 2px dashed var(--absent);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: line-through;
}

.bonds-key--out::after {
  content: "\00D7";
}

/* --------------------------------------------------------------- end panels */

.bonds-result,
.bonds-stats {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.bonds-result {
  text-align: center;
  animation: bonds-result-in var(--transition-slow) ease-out;
}

.bonds-result h2,
.bonds-stats h2,
.bonds-stats h3 {
  font-family: var(--font-display);
}

.bonds-result h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
}

.bonds-result p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bonds-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.bonds-share-feedback {
  min-height: 1.3em;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.bonds-result .bonds-result-next {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

@keyframes bonds-result-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.bonds-stats-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.bonds-stats-heading h2,
.bonds-stats-heading p {
  margin: 0;
}

.bonds-stats-heading h2 {
  font-size: var(--text-lg);
}

.bonds-stats-heading p {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.bonds-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.bonds-stats-grid .stat-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bonds-stats-grid .stat-value {
  font-size: var(--text-2xl);
}

.bonds-stats h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}

.bonds-distribution {
  display: grid;
  gap: var(--space-1);
}

.bonds-dist-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: var(--space-2);
}

.bonds-dist-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: right;
}

.bonds-dist-track {
  display: block;
  height: 22px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.bonds-dist-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(var(--bonds-dist-percent, 0) * 1%);
  min-width: 22px;
  height: 100%;
  padding-right: 6px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  transition: width var(--transition-medium);
}

.bonds-dist-bar--current {
  background: var(--correct);
  color: var(--on-green);
}

.bonds-dist-count {
  font-size: 10px;
  font-weight: 700;
}

.bonds-explainer {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ------------------------------------------------------------- help tutorial */

.bonds-help {
  width: min(640px, calc(100% - 32px));
}

.bonds-help-example {
  display: grid;
  grid-template-columns: 34px 22px 34px 22px 34px 22px 34px 22px 34px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.bonds-demo-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--tile-border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.bonds-demo-node--in {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-green);
}

.bonds-demo-node--in::after,
.bonds-demo-node--out::after {
  position: absolute;
  top: -1px;
  right: 2px;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 900;
}

.bonds-demo-node--in::after { content: "\2713"; }

.bonds-demo-node--out {
  border-color: var(--absent);
  border-style: dashed;
  color: var(--text-muted);
  text-decoration: line-through;
}

.bonds-demo-node--out::after { content: "\00D7"; }

.bonds-demo-link {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 34px;
  color: var(--absent);
}

.bonds-demo-link i {
  position: absolute;
  top: 50%;
  left: 1px;
  right: 4px;
  border-top: 2px dotted currentColor;
}

.bonds-demo-link b {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-52%);
}

.bonds-demo-link--in {
  color: var(--correct);
}

.bonds-demo-link--in i {
  border-top-width: 3px;
  border-top-style: solid;
}

.bonds-demo-link--in b {
  font-size: 17px;
}

.bonds-help-rules {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bonds-help-rules li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bonds-help-rules .bonds-demo-node,
.bonds-help-rules .bonds-demo-link {
  justify-self: center;
}

.bonds-help-direction {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ------------------------------------------------ color-blind / forced color */

html.color-blind .bonds-node--in,
html.color-blind .bonds-key--in,
html.color-blind .bonds-letter-chip--in,
html.color-blind .bonds-chain__node,
html.color-blind .bonds-demo-node--in {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px 6px);
}

html.color-blind .bonds-node--out,
html.color-blind .bonds-key--out,
html.color-blind .bonds-letter-chip--out,
html.color-blind .bonds-demo-node--out {
  background-image: repeating-linear-gradient(45deg, rgba(128, 128, 128, 0.13) 0 2px, transparent 2px 6px);
}

@media (forced-colors: active) {
  .bonds-node--in,
  .bonds-key--in,
  .bonds-chain__node {
    border: 4px double CanvasText;
  }

  .bonds-node--out,
  .bonds-key--out {
    border: 2px dashed GrayText;
  }

  .bonds-connector--in .bonds-connector__line {
    border-top: 4px solid CanvasText;
  }

  .bonds-connector--out .bonds-connector__line {
    border-top: 3px dotted GrayText;
  }

  .bonds-key:focus-visible,
  .bonds-text-button:focus-visible,
  .bonds-mode-button:focus-visible,
  .bonds-game-tools .btn:focus-visible,
  .bonds-hint-confirm .btn:focus-visible,
  .bonds-new-practice-confirm .btn:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 620px) {
  .bonds-page {
    --bonds-node-size: clamp(34px, 11vw, 44px);
    --bonds-link-size: clamp(16px, 5vw, 24px);
    --bonds-row-gap: 4px;
    --bonds-key-gap: 4px;
  }

  .bonds-page-header {
    margin-bottom: var(--space-3);
  }

  .bonds-game {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .bonds-play-area {
    grid-template-areas:
      "board"
      "keyboard"
      "knowledge";
  }

  .bonds-keyboard {
    margin-top: 0;
  }

  .bonds-knowledge {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .bonds-inventory,
  .bonds-known {
    padding: var(--space-2) var(--space-3);
  }

  .bonds-key {
    height: 46px;
    font-size: 12px;
  }

  .bonds-key--wide {
    font-size: 9px;
  }

  .bonds-stats-grid {
    gap: var(--space-1);
  }

  .bonds-stats-grid .stat-value {
    font-size: var(--text-xl);
  }

  .bonds-stats-grid .stat-label {
    font-size: 10px;
  }
}

@media (max-width: 350px) {
  .bonds-page {
    --bonds-node-size: 35px;
    --bonds-link-size: 18px;
  }

  .bonds-game {
    padding-inline: var(--space-2);
  }

  .bonds-key {
    height: 44px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .bonds-help-example {
    grid-template-columns: 28px 16px 28px 16px 28px 16px 28px 16px 28px;
    padding: var(--space-2);
  }

  .bonds-help-example .bonds-demo-node {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .bonds-help-example .bonds-demo-link {
    width: 16px;
    height: 28px;
  }
}

@media (max-height: 740px) and (max-width: 620px) {
  .bonds-page {
    --bonds-node-size: 36px;
    --bonds-link-size: 18px;
    --bonds-row-gap: 3px;
  }

  .bonds-status {
    min-height: 1.5em;
    margin-bottom: var(--space-2);
  }

  .bonds-knowledge {
    margin-block: var(--space-2);
  }

  .bonds-key {
    height: 44px;
  }
}

@media (pointer: coarse) {
  .bonds-text-button,
  .bonds-key,
  .bonds-mode-button,
  .bonds-game-tools .btn,
  .bonds-hint-confirm .btn,
  .bonds-new-practice-confirm .btn,
  .bonds-result-actions .btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonds-node,
  .bonds-key,
  .bonds-dist-bar {
    transition: none;
  }

  .bonds-node--filled,
  .bonds-node--reveal,
  .bonds-connector--reveal,
  .bonds-row--shake,
  .bonds-result {
    animation: none;
  }
}