.board-wrap { width: 100%; display: flex; justify-content: center; }
.board {
  --size: min(94vw, calc(100dvh - 330px), 560px);
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-template-rows: repeat(var(--rows, 4), 1fr);
  gap: 3px;
  width: max(var(--size), 220px);
  aspect-ratio: var(--ar, 1);
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  user-select: none;
}
.board.paused { filter: blur(8px); pointer-events: none; }

.tile {
  position: relative; padding: 0; border: 0; border-radius: 8px;
  background: var(--tile-bg); overflow: hidden; min-width: 0; min-height: 0;
}
.tile.locked { background: var(--tile-locked); cursor: default; }
.tile.type-empty, .tile.type-blocker { cursor: default; }
.tile svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .22s ease; }
.board.instant .tile svg { transition: none; }

.wire { fill: none; stroke: var(--wire-off); stroke-width: 12; stroke-linecap: butt; stroke-linejoin: round; transition: stroke .25s; }
.hub { fill: var(--wire-off); transition: fill .25s; }
.node { transition: fill .25s, stroke .25s; }
.node.src { fill: var(--yellow); stroke: #fff6; stroke-width: 4; }
.type-source .wire { stroke: var(--yellow); }
.node.tgt { fill: var(--tile-bg); stroke: var(--wire-off); stroke-width: 8; }
.tgt-core { fill: var(--wire-off); transition: fill .25s; }
.blk { fill: #2a1520; stroke: #7f1d1d; stroke-width: 4; }
.blk-x { stroke: var(--danger); stroke-width: 7; stroke-linecap: round; fill: none; }
.dot { fill: #2c3760; }

.tile.on .wire { stroke: var(--energy); filter: drop-shadow(0 0 4px var(--energy)); transition-delay: var(--d, 0ms); }
.tile.on .hub { fill: var(--energy); transition-delay: var(--d, 0ms); }
.tile.on .node.tgt { stroke: var(--green); fill: #12351f; transition-delay: var(--d, 0ms); }
.tile.on .tgt-core { fill: var(--green); transition-delay: var(--d, 0ms); }

/* Penanda ubin terkunci (tidak bisa diputar): sudut ungu + garis tepi, tidak hanya warna. */
.tile.fixed { background: var(--tile-locked); box-shadow: inset 0 0 0 2px #3b2f6b; }
.tile.fixed::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 0; height: 0;
  border-top: 12px solid var(--purple); border-left: 12px solid transparent; border-top-right-radius: 6px;
}
.tile.hint { box-shadow: inset 0 0 0 3px var(--yellow); }
.tile.err { box-shadow: inset 0 0 0 3px var(--danger); }

/* ===== Color Logic: warna selalu dipasangkan dengan simbol (badge) dan pola garis ===== */
.tile { --tc: var(--cyan); }
.tile.tc-C { --tc: var(--cyan); } .tile.tc-Y { --tc: var(--yellow); } .tile.tc-G { --tc: var(--green); }
.tile.col-C { --energy: var(--cyan); } .tile.col-Y { --energy: var(--yellow); } .tile.col-G { --energy: var(--green); }
.tile.col-multi { --energy: #f1f5f9; }
.tile.col-Y .wire { stroke-dasharray: 16 8; }          /* kuning: putus-putus */
.tile.col-G .wire { stroke-dasharray: 3 7; stroke-linecap: round; }  /* hijau: titik-titik */
.tile.type-source[class*="tc-"] .node.src { fill: var(--tc); }
.tile.type-source[class*="tc-"] .src-core, .tile.type-target[class*="tc-"] .tgt-core { display: none; }
.tile.type-source[class*="tc-"] .wire { stroke: var(--tc); }
.tile.type-target[class*="tc-"] .node.tgt { stroke: var(--tc); fill: var(--tile-bg); }
.tile.type-target[class*="tc-"].on .node.tgt { fill: #12351f; stroke: var(--tc); filter: drop-shadow(0 0 6px var(--tc)); }
.tile.wrongc .node.tgt { stroke: var(--danger) !important; stroke-dasharray: 8 6; }
.fbody { fill: var(--tile-bg); stroke: var(--tc); stroke-width: 6; }
.mixbody { fill: #2a2250; stroke: var(--purple); stroke-width: 5; }
.marrow { fill: var(--purple); }
.badge {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 800 calc(max(var(--size), 220px) / var(--cols) * .3) var(--mono); line-height: 1; color: var(--tc);
}
.tile.type-source .badge { color: #0b0e17; }
.tile.type-mixer .badge { color: var(--purple); }

/* ===== Memory Circuit: ubin tersembunyi ===== */
.notch { display: none; fill: var(--purple); }
.tile.masked .notch, .board.memorize .notch { display: block; }
.tile.masked svg .wire, .tile.masked svg .hub, .tile.masked svg .fbody, .tile.masked svg .mixbody, .tile.masked svg .marrow { display: none; }
.tile.masked .badge { display: none; }
.tile.masked::before {
  content: '?'; position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 calc(max(var(--size), 220px) / var(--cols) * .34) var(--mono); color: var(--muted); pointer-events: none;
}

/* ===== Unstable Grid: ubin permanen (cincin cyan di kiri bawah) ===== */
.tile.perm::after {
  content: ''; position: absolute; left: 4px; bottom: 4px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--cyan); background: transparent; z-index: 1;
}

/* ===== Dual Circuit: dua papan berdampingan + ubin bersama ===== */
.board.wide { --size: min(96vw, 720px); }
.tile.shared:not(.hint):not(.err) { box-shadow: inset 0 0 0 2px #6d4fd1; }
.badge.share {
  place-items: start end; padding: 2px 4px; color: var(--purple);
  font-size: calc(max(var(--size), 220px) / var(--cols) * .26);
}
.tile.twin-hi { background: #2a2250; }

/* Ponsel potret: papan A di atas, papan B di bawah. Tinggi mengikuti ruang layar yang tersedia. */
.board.tall { --h: clamp(300px, calc(100dvh - 356px), 640px); width: calc(var(--h) * var(--cols) / var(--rows)); }
.board.tall .badge.share { font-size: calc(var(--h) / var(--rows) * .26); }