/* Copyright2026 NeuroForgeIO. Apache-2.0. */
:root{color-scheme:light;--ink:#133746;--blue:#145e74;--pale:#edf7f9;--gold:#ffe0a6}
*{box-sizing:border-box}body{margin:0;background:var(--pale);color:var(--ink);font-family:system-ui,sans-serif;line-height:1.5}header,main,footer{max-width:1120px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:12px;align-items:center}a{color:var(--blue);text-underline-offset:.18em}h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.1;margin:16px 0}h2{font-size:1.35rem;margin:22px 0 12px}.intro{font-size:1.3rem}.pill{background:var(--gold);border-radius:24px;padding:8px 14px;font-weight:700}.maker{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.7fr);gap:24px}.controls{align-self:start}.controls,.drawing,.note{background:white;border:2px solid #bed5dd;border-radius:24px;padding:24px}label{display:block;margin-top:14px;font-weight:700}input,select,button{font:inherit;min-height:48px;border-radius:12px;border:2px solid #557986}input,select{width:100%;padding:10px;min-width:0}button{cursor:pointer;background:var(--blue);color:white;padding:10px 16px;font-weight:700}button:disabled{cursor:default;opacity:.65}.secondary{background:white;color:var(--ink)}#add,#remove{margin-top:12px}.moves{display:grid;grid-template-columns:1fr 1fr;gap:8px}.small{font-size:.95rem}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px;border:3px solid #557986;border-radius:16px;background:#f5fbfc}.cell{aspect-ratio:1;min-width:0;min-height:52px;padding:4px;background:white;color:var(--ink);position:relative;border:2px solid #72909b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}.cell[aria-pressed="true"]{outline:4px solid #9b4600;outline-offset:1px}.cell .part-symbol{font-size:clamp(1.2rem,3vw,2rem);line-height:1}.cell .cell-position{font-size:.72rem}.cell.wall{background:#e1e6eb}.cell.display{background:#ffe0a6}.cell.welcome{background:#ddf2e1}.visitor-symbol{background:#133746;color:white;border-radius:50%;padding:3px 7px;font-size:1.05rem}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.selection{font-weight:700}#status{padding:12px;border-left:5px solid var(--blue);background:#edf7f9;min-height:72px}details{margin-top:14px}summary{cursor:pointer;padding:12px 0;min-height:48px;font-weight:700}footer{font-size:.95rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid #9b4600;outline-offset:4px}
@media(max-width:700px){header,main,footer{padding:16px}.maker{grid-template-columns:1fr}.controls,.drawing{padding:16px;border-radius:18px}.board{gap:6px;padding:8px}.pill{font-size:.85rem}.cell{min-height:48px}.actions button{flex:1 1 120px}}
@media(max-width:380px){header,main,footer{padding:12px}.controls,.drawing{padding:12px}.board{gap:4px;padding:6px}}
@media print{header,.controls,.actions,details,footer{display:none}.maker{display:block}body{background:white}.drawing{border:0}#status{background:white}.board{max-width:650px}.cell{aspect-ratio:1}}

.cell .cell-position{position:absolute;top:2px;left:4px;line-height:1}.cell .visitor-symbol{position:absolute;left:50%;top:65%;transform:translate(-50%,-50%);padding:2px 6px;line-height:1.25}.cell:has(.visitor-symbol) .part-symbol{opacity:.2}#drawing-preview{margin-top:18px;padding:12px;border:2px solid #bed5dd;border-radius:16px}#drawing-preview[hidden]{display:none}#preview-image svg{display:block;width:100%;height:auto}
