/* Köprü Kur (kidsBridges). Every rule is scoped under .kp-bridges. The stage paints its own light paper and dark ink,
   so it reads the same in a light or a dark page theme. */
.kp-bridges {
  --kp-ink: #1f3b4d;
  /* The site paints paragraphs with --k-ink-2 (pale, for dark pages); this paper needs the dark ink instead. */
  --k-ink-2: var(--kp-ink);
  --kp-paper: #fbfdff;
  --kp-sea: #dcf1f7;
  --kp-deep: #0d4a66;
  --kp-focus: #1d5f86;
  --kp-current: #cfe9f3;
  --kp-guide: #6d8fa0;
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 18px;
  background: var(--kp-paper);
  color: var(--kp-ink);
  color-scheme: light;
  line-height: 1.5;
}
.kp-bridges .screen-only { display: block; }
.kp-bridges .print-only { display: none; }
.kp-bridges .kp-instruction { margin: 0 0 14px; font-size: 1.05rem; }
.kp-bridges .kp-subheading { margin: 14px 0 8px; font-size: 1rem; }
.kp-bridges button {
  min-width: 48px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--kp-ink);
  border-radius: 14px;
  background: var(--kp-paper);
  color: var(--kp-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.kp-bridges button[aria-pressed="true"] { background: var(--kp-current); box-shadow: inset 0 0 0 2px var(--kp-deep); }
.kp-bridges button:disabled { opacity: .45; cursor: not-allowed; }
.kp-bridges button:focus-visible { outline: 4px solid var(--kp-focus); outline-offset: 3px; }
.kp-bridges .kp-levels,
.kp-bridges .kp-controls,
.kp-bridges .kp-pair-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.kp-bridges .kp-rule { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--kp-sea); font-weight: 600; }
.kp-bridges .kp-bridge-board {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 12px;
  aspect-ratio: 1;
  border: 2px solid var(--kp-deep);
  border-radius: 18px;
  background: var(--kp-sea);
  overflow: hidden;
}
.kp-bridges .kp-bridge-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.kp-bridges .kp-bridge-lines .kp-bridge { stroke: var(--kp-ink); stroke-width: .16; stroke-linecap: round; }
.kp-bridges .kp-bridge-lines .kp-active { stroke: var(--kp-focus); stroke-width: .2; }
.kp-bridges .kp-bridge-lines .kp-guide { stroke: var(--kp-guide); stroke-width: .08; stroke-dasharray: .14 .12; stroke-linecap: round; }
.kp-bridges .kp-bridge-grid {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
}
.kp-bridges .kp-bridge-grid[data-size="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.kp-bridges .kp-bridge-grid[data-size="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
.kp-bridges .kp-water { display: block; }
.kp-bridges .kp-island {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 82%;
  height: 82%;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 3px solid var(--kp-ink);
  border-radius: 50%;
  background: var(--kp-paper);
  color: var(--kp-ink);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.kp-bridges .kp-island.kp-print { border-width: 2px; }
.kp-bridges .kp-island .kp-need { grid-area: 1 / 1; }
.kp-bridges .kp-island .kp-letter {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  margin: 12% 0 0 22%;
  font-size: .95rem;
  font-weight: 800;
}
.kp-bridges .kp-island .kp-tick { display: none; grid-area: 1 / 1; align-self: end; justify-self: end; width: 26px; height: 26px; margin: 0 -2px -2px 0; }
.kp-bridges .kp-island.kp-met .kp-tick { display: block; }
.kp-bridges .kp-island.kp-selected { border-style: double; border-width: 6px; background: var(--kp-current); }
.kp-bridges .kp-island.kp-partner { border-style: dashed; }
.kp-bridges .kp-island.kp-current { background: var(--kp-current); }
.kp-bridges .kp-island.kp-hinted { outline: 3px dashed var(--kp-deep); outline-offset: 4px; }
.kp-bridges .kp-island:focus-visible { outline: 4px solid var(--kp-focus); outline-offset: 3px; }
.kp-bridges .kp-pair {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--kp-deep);
}
.kp-bridges .kp-pair-text { margin: 0 0 8px; font-weight: 700; }
.kp-bridges .kp-status { min-height: 2.2em; margin: 6px 0; font-weight: 700; }
.kp-bridges .kp-status:focus-visible { outline: 3px solid var(--kp-focus); outline-offset: 3px; }
.kp-bridges .kp-status[data-solved="true"] { color: var(--kp-deep); }
.kp-bridges .kp-hint:empty { display: none; }
.kp-bridges .kp-hint { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #fff7dc; color: var(--kp-ink); }
.kp-bridges .kp-trains { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--kp-sea); }
.kp-bridges .kp-trains p { margin: 4px 0; }
.kp-bridges .kp-trains h2, .kp-bridges .kp-trains p { color: var(--kp-ink); }
.kp-bridges .kp-why { font-style: italic; }
@media print {
  .kp-bridges { background: #fff; color: #000; padding: 0; }
  .kp-bridges .screen-only { display: none; }
  .kp-bridges .print-only { display: block; color: #000; }
  .kp-bridges .kp-bridge-board { border: 1px solid #000; background: #fff; max-width: 100%; }
  .kp-bridges .kp-island { border: 2px solid #000; background: #fff; color: #000; }
  .kp-bridges .kp-water { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-bridges * { transition: none !important; animation: none !important; }
}