.connection-board { margin-top: 12px; scroll-margin-top: calc(var(--topbar) + 14px); }
.connection-board-frame { border: 8px solid #3d3025; border-radius: 5px; background: #201a14; box-shadow: inset 0 0 0 2px #73563b, 0 20px 50px #0008; }
.connection-board-header { min-height: 78px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 15px 18px 12px; border-bottom: 1px solid #5d4431; background: radial-gradient(ellipse at 30% 0,#473423,#261d16 70%); }
.connection-board-header .kicker { margin: 0; color: #e8dfc9; font: 1.35rem/1.1 var(--editorial); letter-spacing: 0; text-transform: none; }
.connection-board-header h2 { margin: 5px 0 0; color: #c8b69c; font-size: .76rem; font-weight: 400; }
.connection-board-actions { display: flex; gap: 5px; }
.connection-board-header button { flex: 0 0 auto; padding: 9px 11px; border: 1px solid #806348; border-radius: 4px; background: #2b2118; color: #e0c99f; font: .65rem var(--mono); }
.connection-board-header [data-board-pan] { display: none; min-width: 30px; }
.connection-board-header button:hover, .connection-board-header button:focus-visible { border-color: #d0a76c; outline: 2px solid #d0a76c; outline-offset: 2px; }
.connection-board-viewport { width: 100%; overflow: auto; scrollbar-color: #8b6542 #241b15; scrollbar-width: thin; }
.connection-board-viewport:focus-visible { outline: 2px solid #d6ae75; outline-offset: -4px; }
.connection-board-stage { position: relative; width: 100%; min-width: 760px; height: 620px; overflow: hidden; isolation: isolate; background-color: #523c2b; background-image: radial-gradient(circle at 16% 25%,#a5774a35 0 1px,transparent 2px), radial-gradient(circle at 65% 70%,#1b120d3d 0 1px,transparent 2px), repeating-linear-gradient(33deg,transparent 0 2px,#e0ae7221 3px 4px,transparent 5px 10px), radial-gradient(ellipse at 50% 38%,#806041,#37291e 85%); background-size: 13px 17px,19px 11px,auto,auto; box-shadow: inset 0 0 95px #130c08b5; }
.connection-board-stage::before { content: ""; position: absolute; inset: 8px; border: 1px solid #c49b5b35; pointer-events: none; }
.connection-board-stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 52%,transparent 40%,#160f0a55 100%); }
.connection-board-card, .connection-board-note { position: absolute; left: var(--board-x); top: var(--board-y); z-index: 2; transform: rotate(var(--board-rotation)); box-shadow: 0 13px 17px #100b0a80; }
.connection-board-card { width: 145px; min-height: 137px; padding: 7px; border: 1px solid #e3d9bc; background: #d8d0bb; color: #27231e; cursor: grab; touch-action: none; user-select: none; }
.connection-board-card.is-photo:nth-of-type(2n) { background: #e0d7c3; }
.connection-board-card:hover, .connection-board-card:focus-visible, .connection-board-card.is-selected { z-index: 5; outline: 3px solid #f0b777; outline-offset: 3px; transform: rotate(var(--board-rotation)) scale(1.04); }
.connection-board-card.is-dragging { opacity: .38; cursor: grabbing; }
.connection-board-card.is-connected { border-color: #d7b984; }
.connection-board-card.is-pinned { box-shadow: 0 13px 17px #100b0a80, 0 0 0 2px #b38b55; }
.connection-pin { position: absolute; z-index: 5; top: -5px; left: calc(50% - 5px); width: 11px; height: 11px; border-radius: 50%; border: 1px solid #631e19; background: radial-gradient(circle at 33% 27%,#ec8a6b,#9d342a 50%,#4f1815 85%); box-shadow: 1px 3px 3px #0009; pointer-events: none; }
.connection-card-image { display: block; height: 77px; overflow: hidden; border: 1px solid #494036; background: #867867; }
.connection-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--image-x) var(--image-y); transform: scale(var(--image-scale)); transform-origin: var(--image-x) var(--image-y); filter: grayscale(.55) sepia(.23) contrast(1.09) brightness(.78); pointer-events: none; }
.connection-paper-lines { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(0deg,transparent 0 13px,#72634e88 14px 15px,transparent 16px),linear-gradient(100deg,#c3b18d,#eee4cf); }
.connection-board-card.is-paper { background: #dac9a5; }
.connection-board-card.is-paper .connection-card-image { border: 0; }
.connection-card-caption { display: grid; gap: 2px; padding: 5px 2px 0; }
.connection-card-caption small { color: #65543e; font: .46rem var(--mono); white-space: nowrap; }
.connection-card-caption strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #29231c; font: 600 .67rem/1.15 Georgia,serif; }
.connection-card-caption em { color: #915037; font: normal .43rem var(--mono); letter-spacing: .04em; }
.connection-board-card > button { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border: 1px solid #8a7a63; background: #e2d7c0; color: #3e3022; font: .67rem var(--mono); }
.connection-board-card > button:hover, .connection-board-card > button:focus-visible { background: #f7e8c9; outline: 2px solid #9d4b33; }
.connection-board-note { width: 143px; min-height: 117px; padding: 10px 8px; background: #d7c399; color: #342b20; border: 1px solid #eddcb8; box-shadow: 0 12px 19px #100b0a8c; }
.connection-board-note:nth-of-type(2n) { background: #cdbb97; }
.connection-board-note.is-locked { filter: saturate(.55) brightness(.8); }
.connection-board-note.is-solved { background: #ded0a9; box-shadow: 0 12px 19px #100b0a8c,0 0 0 2px #af493a; }
.connection-target-drop { display: grid; align-content: center; justify-items: center; gap: 5px; width: 100%; min-height: 96px; padding: 6px; border: 1px dashed #8e6c4b; background: transparent; color: #33281c; text-align: center; }
.connection-target-drop:hover, .connection-target-drop:focus-visible, .connection-target-drop.is-drop-hover { outline: 3px solid #b74537; outline-offset: 2px; background: #f0d9a3; }
.connection-target-drop small { color: #754735; font: .45rem var(--mono); }
.connection-target-drop strong { color: #30251d; font: italic 1rem/1.12 Georgia,serif; }
.connection-target-drop em { color: #7b4838; font: normal .47rem var(--mono); }
.connection-target-drop[aria-disabled="true"] { cursor: default; }
.connection-board-stamp { position: absolute; right: 20px; bottom: 15px; color: #e4c49d80; font: .54rem var(--mono); letter-spacing: .18em; transform: rotate(-7deg); }
.connection-board-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.connection-board-lines path { fill: none; stroke: #a22e24; stroke-width: 2.4; filter: drop-shadow(1px 2px 2px #1d0f0d); }
.connection-board-lines circle { fill: #a83428; stroke: #59211c; stroke-width: 1; }
.connection-board-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 43px; padding: 9px 15px; border-top: 1px solid #735237; background: #291f17; color: #d0bea2; font: .61rem/1.5 var(--mono); }
.connection-board-footer output { flex: 0 0 auto; color: #e6bf83; }
.connection-board-ledger { display: grid; gap: 1px; margin-top: 16px; border: 1px solid #4d503a; background: #4d503a; }
.connection-ledger-heading { display: flex; justify-content: space-between; gap: 12px; padding: 12px 17px; background: #1c2118; color: #cbb389; font: .59rem var(--mono); }
.connection-ledger-heading small { color: #88917b; font: inherit; }
.connection-ledger-row { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 12px; padding: 15px 17px; background: #1a1e16; }
.connection-ledger-row > span { color: #b6946f; font-size: 1rem; }
.connection-ledger-row.is-solved > span { color: #a9c394; }
.connection-ledger-row strong { color: #dbddcc; font: .96rem/1.35 var(--editorial); }
.connection-ledger-row p { margin: 6px 0; color: #aeb6a4; font-size: .76rem; line-height: 1.6; }
.connection-ledger-row small { display: block; margin: 9px 0; color: #d0b584; font: .55rem var(--mono); }
.connection-ledger-row .btn { min-height: 34px; margin-top: 8px; font-size: .62rem; }
.connection-drag-ghost { position: fixed; z-index: 100; top: 0; left: 0; width: 145px; padding: 7px; border: 1px solid #eee1c2; background: #e1d6bd; color: #28221d; box-shadow: 0 18px 38px #000a; opacity: .9; pointer-events: none; }
.connection-drag-ghost .connection-card-image { height: 77px; }
body.board-expanded { overflow: hidden; }
.connection-board-frame.is-expanded { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; width: 100vw; height: 100dvh; border-width: 12px; }
.connection-board-frame.is-expanded .connection-board-viewport { flex: 1 1 auto; }
.connection-board-frame.is-expanded .connection-board-stage { min-height: 620px; height: 100%; }
@media (max-width: 720px) {
  .connection-board-frame { border-width: 5px; }
  .connection-board-header { display: grid; grid-template-columns: minmax(0,1fr); min-height: 70px; padding: 12px; }
  .connection-board-header > div { min-width: 0; }
  .connection-board-actions { justify-content: flex-end; }
  .connection-board-header .kicker { font-size: 1.1rem; }
  .connection-board-header h2 { font-size: .66rem; }
  .connection-board-header button { font-size: .54rem; }
  .connection-board-header [data-board-pan] { display: block; }
  .connection-board-viewport { min-height: 620px; }
  .connection-board-footer { flex-direction: column; align-items: flex-start; font-size: .56rem; }
  .connection-ledger-heading { flex-direction: column; }
}