.sight-layout { grid-template-columns: minmax(0, 1.45fr) minmax(290px, .7fr); }
.sight-play {
  background:
    linear-gradient(90deg, rgba(185,221,124,.24) 0 1px, transparent 1px 100%) 0 0 / 22px 100%,
    linear-gradient(rgba(185,221,124,.24) 0 1px, transparent 1px 100%) 0 0 / 100% 22px,
    #fbfbef;
}
.puzzle-ticket { width: min(100%, 610px); margin: 0 auto 12px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .64rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.puzzle-ticket strong { color: var(--ink); font-size: .8rem; }
.sight-board { --n:4; width: min(100%, 610px); aspect-ratio: 1; margin: 0 auto; display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; grid-template-rows: 42px minmax(0,1fr) 42px; }
.edge-clues { display: grid; color: var(--ink); font: 950 clamp(.72rem,1.5vw,.92rem)/1 ui-monospace, monospace; }
.edge-clues.top, .edge-clues.bottom { grid-template-columns: repeat(var(--n),1fr); }
.edge-clues.left, .edge-clues.right { grid-template-rows: repeat(var(--n),1fr); }
.edge-clues.top { grid-column:2;grid-row:1; }
.edge-clues.bottom { grid-column:2;grid-row:3; }
.edge-clues.left { grid-column:1;grid-row:2; }
.edge-clues.right { grid-column:3;grid-row:2; }
.edge-clues span { display:grid;place-items:center; }
.edge-clues span.hidden { opacity:0; }
.edge-clues.top span::after { content:'↓'; margin-left:2px; color:var(--coral-dark);font-size:.65em; }
.edge-clues.bottom span::before { content:'↑'; margin-right:2px; color:var(--coral-dark);font-size:.65em; }
.edge-clues.left span::after { content:'→'; margin-left:2px;color:var(--coral-dark);font-size:.65em; }
.edge-clues.right span::before { content:'←'; margin-right:2px;color:var(--coral-dark);font-size:.65em; }
.tower-grid { grid-column:2;grid-row:2; display:grid;grid-template-columns:repeat(var(--n),1fr);border:2px solid var(--ink);border-radius:8px;background:var(--ink);box-shadow:0 16px 30px rgba(23,34,31,.12), 5px 5px 0 var(--ink);gap:3px;overflow:hidden; }
.tower-cell { position:relative;min-width:0;padding:0;border:0;background:var(--paper);color:var(--ink);cursor:pointer;overflow:hidden; }
.tower-cell::before { content:'';position:absolute;left:16%;right:16%;bottom:0;height:calc(var(--height,0) * 15%);max-height:78%;border-radius:6px 6px 0 0;background:rgba(102,184,197,.33);transition:height .16s ease; }
.tower-cell:hover { background:#f7f1df; }
.tower-cell.selected { background:var(--yellow);box-shadow:inset 0 0 0 4px var(--coral); }
.tower-cell.given { background:#e6efce;cursor:default; }
.tower-cell.conflict { background:var(--danger-soft);animation:cell-wobble .28s ease; }
.tower-cell.hinted { background:#ffd7d1; }
.tower-value { position:relative;z-index:2;font:950 clamp(1.05rem,3vw,1.55rem)/1 ui-monospace,monospace; }
.cell-notes { position:absolute;z-index:2;inset:5px;display:grid;grid-template-columns:repeat(3,1fr);align-content:center;color:var(--muted);font:800 clamp(.42rem,1vw,.58rem)/1 ui-monospace,monospace; }
.number-pad { width:min(100%,610px);margin:22px auto 0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px; }
.number-pad button { min-height:47px;border:2px solid var(--ink);border-radius:8px;background:var(--blue);box-shadow:2px 3px 0 var(--ink);font:950 1rem/1 ui-monospace,monospace;cursor:pointer; }
.number-pad button:hover { transform:translateY(-2px); }
.board-tools { width:min(100%,610px);margin:10px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.board-tools .button.active { background:var(--accent-deep);color:var(--paper); }
.example-card { background:rgba(255,250,240,.92); }
.sight-example { margin:12px 0;display:flex;align-items:end;gap:6px; }
.sight-example b { align-self:center;margin-right:4px;font:950 .72rem/1 ui-monospace,monospace; }
.sight-example span { width:31px;height:calc(var(--h) * 13px);border:1.5px solid var(--ink);border-radius:5px 5px 0 0;background:var(--blue);display:grid;place-items:center;font:950 .65rem/1 ui-monospace,monospace; }
@keyframes cell-wobble { 25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)} }
@media (max-width:850px){.sight-layout{grid-template-columns:1fr}}
@media (max-width:600px){.sight-board{grid-template-columns:30px minmax(0,1fr) 30px;grid-template-rows:30px minmax(0,1fr) 30px}.tower-grid{border-radius:12px;gap:2px}.cell-notes{inset:2px}.sight-play{padding:12px}}