@font-face{font-family:Nunito;src:url('nunito-sans.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{color-scheme:dark;font-family:Nunito,system-ui,sans-serif;color:#eef5fa;background:#102c40;line-height:1.6}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:auto;padding:26px 24px 64px}a{color:#99dcff;text-underline-offset:4px}header{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px;font-size:14px}h1{font-size:26px;line-height:1.15;letter-spacing:-.035em;margin:12px 0}h2{font-size:23px;line-height:1.3;margin:0 0 10px}p{max-width:800px;margin:12px 0}.muted{color:#c3d5e0;font-size:14px}.collection-nav{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.collection-nav a{padding:8px 14px;text-decoration:none;border-radius:6px;background:#1b415a}.collection-nav a[aria-current=page]{background:#b9e6ff;color:#102c40;font-weight:800}.stats{font-size:17px;font-weight:650;margin:12px 0}.viewer{margin-top:30px;scroll-margin-top:20px}.viewer-head{display:flex;justify-content:space-between;align-items:start;gap:14px}.viewer-head p{margin:5px 0 16px}.viewer-layout{display:block;max-width:760px;margin:auto}.board-card{border-radius:10px;overflow:hidden;background:#1768b2;--bg:#1768b2;--you:#087df1;--pig:#e94c45;--wood:#279d51;--brick:#e77c48;--wool:#acbf38;--grain:#f2c84f;--ore:#a4ada5;--sand:#ddce96}.board-wrap{overflow:auto}.board-wrap.zoomed svg{min-width:800px}#board{display:block;width:100%;height:auto;margin:auto;max-height:650px}#board text{font-family:Nunito,sans-serif}.tile{stroke:#f3d897;stroke-width:4;stroke-linejoin:round}.tile-inset{fill:none;stroke:#ffffff35;stroke-width:1}.number-token{fill:#fff5dc;stroke:#746844;stroke-width:.7}.number-text{font-size:18px;font-weight:800;fill:#213d3a;text-anchor:middle}.pips{fill:#24463e}.road-base{stroke:#b89b61;stroke-width:2;stroke-linecap:round}.port-line{stroke:#d9eafa;stroke-width:1.4;stroke-dasharray:2 2}.port-label{font-size:12px;fill:#fff;text-anchor:middle;font-weight:800;paint-order:stroke;stroke:var(--bg);stroke-width:3}.scores{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px}.score{background:#104c83;border-radius:6px;padding:10px 12px;min-width:0}.score strong{display:block;overflow-wrap:anywhere}.score span{font-size:13px}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}button,select,input[type=search]{font:inherit;background:#1b415a;color:#eef5fa;border:1px solid #6b8ba2;border-radius:6px;padding:9px 12px;min-height:44px}button{cursor:pointer}button:hover{background:#2a5875}button:disabled{opacity:.4;cursor:default}#play{background:#d9efff;color:#102c40;font-weight:800;min-width:76px}input[type=range]{width:100%;accent-color:#98dbff;min-height:32px}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #9ddfff;outline-offset:3px}#position{font-size:13px;color:#c3d5e0}details{max-width:840px;font-size:14px;margin:20px 0;color:#c3d5e0}summary{cursor:pointer;color:#edf5fa}.filters{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:26px 0 16px}.filters label{font-size:13px;display:grid;gap:5px}.filters input{max-width:100%}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:14px}th,td{padding:12px;border-bottom:1px solid #42647c}tbody tr:nth-child(even){background:#16374e}th button{border:0;background:none;padding:0;min-height:36px;font-size:13px}td a{display:block;min-height:32px;line-height:32px}th{color:#bdd0dd}.error{padding:16px;border:1px solid #ff9a94;border-radius:6px}footer{margin-top:40px;font-size:13px;color:#c1d2df}[hidden]{display:none!important}
@media(max-width:800px){.viewer-layout{grid-template-columns:1fr}}@media(max-width:480px){main{padding:20px 14px 44px}header{font-size:13px}.controls{gap:6px}button,select{padding:8px 10px;font-size:14px}.scores{padding:0 10px 10px;gap:6px}.score{padding:8px}.score strong{font-size:14px}.score span{font-size:12px}th,td{padding:8px;font-size:13px}.optional{display:none}.viewer-head{display:block}.filters{gap:10px}.filters input{width:160px}.stats{font-size:16px}#position{font-size:12px}.collection-nav a{font-size:14px;padding:8px 10px}}

.viewer-head{max-width:760px;margin:auto}.controls #copy{margin-left:auto;font-size:13px;background:transparent}.viewer{margin-top:24px}
