:root{--paper:#f4f1ea;--paper-2:#ebe6da;--ink:#141414;--ink-2:#4a4a4a;--line:#141414;--red:#d02a2a;--blue:#1d4e9e;--yellow:#f2c230;--black:#1a1a1a;--green:#2f7d4f;--cell:44px;--radius:2px;--font-display:"Archivo", system-ui, sans-serif;--font-mono:"Space Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);font-family:var(--font-display);margin:0;padding:0}body{-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font-family:inherit}a{color:inherit}code,.mono{font-family:var(--font-mono)}.app{max-width:1120px;margin:0 auto;padding:16px 16px 64px}.header{border-bottom:3px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:8px 0 20px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-mark{background:var(--ink);grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:3px;width:44px;height:44px;padding:3px;display:grid}.brand-mark span:first-child{background:var(--red)}.brand-mark span:nth-child(2){background:var(--yellow);border-radius:50%}.brand-mark span:nth-child(3){background:var(--blue);clip-path:polygon(0 100%,100% 0,100% 100%)}.brand-mark span:nth-child(4){background:var(--paper)}.brand h1{letter-spacing:.08em;margin:0;font-size:28px;font-weight:900;line-height:1}.brand p{color:var(--ink-2);letter-spacing:.02em;margin:4px 0 0;font-size:12px}.header-right{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.badge{font-family:var(--font-mono);border:2px solid var(--ink);background:var(--paper);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;font-size:11px}.badge.yellow{background:var(--yellow)}.badge.green{background:#d7f0df}.tabs{border:3px solid var(--ink);gap:0;width:-moz-fit-content;width:fit-content;max-width:100%;margin:18px 0 20px;display:flex}.tab{background:var(--paper);border:0;border-right:3px solid var(--ink);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;font-size:13px;font-weight:800}.tab:last-child{border-right:0}.tab.active{background:var(--ink);color:var(--paper)}.tab:hover:not(.active){background:var(--paper-2)}.layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:28px;display:grid}@media (max-width:860px){.layout{grid-template-columns:1fr}}.board-wrap{touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:18px;display:flex}.board{grid-template-columns:repeat(8, var(--cell));grid-template-rows:repeat(8, var(--cell));background:var(--ink);border:3px solid var(--ink);gap:3px;padding:6px;display:grid;position:relative}.cell{background:var(--paper);transition:background .12s;position:relative}.cell.c1{background:var(--red)}.cell.c2{background:var(--blue)}.cell.c3{background:var(--yellow)}.cell.c4{background:var(--black);box-shadow:inset 0 0 0 2px #333}.cell.ghost-ok{box-shadow:inset 0 0 0 3px var(--ink);opacity:.55}.cell.ghost-ok.c1{background:var(--red)}.cell.ghost-ok.c2{background:var(--blue)}.cell.ghost-ok.c3{background:var(--yellow)}.cell.ghost-ok.c4{background:var(--black)}.cell.ghost-bad{background:repeating-linear-gradient(45deg,#f4f1ea,#f4f1ea 4px,#e6b1b1 4px 8px)}.cell.will-clear{outline:3px solid var(--ink);outline-offset:-3px;animation:.7s infinite pulse}.cell.flash{animation:.38s ease-out flash}@keyframes pulse{0%,to{filter:brightness()}50%{filter:brightness(1.35)}}@keyframes flash{0%{background:#fff;transform:scale(1.08)}to{transform:scale(1)}}.board.over:after{content:"RUN COMPLETE";letter-spacing:.2em;color:var(--ink);background:#f4f1ead1;place-items:center;font-size:26px;font-weight:900;display:grid;position:absolute;inset:0}.hand{width:calc(8 * var(--cell) + 7 * 3px + 18px);grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.slot{border:3px solid var(--ink);background:var(--paper-2);cursor:grab;place-items:center;height:112px;display:grid;position:relative}.slot.empty{opacity:.5;cursor:default;border-style:dashed}.slot.selected{background:var(--yellow)}.slot.dead{opacity:.35;cursor:not-allowed}.slot.dead:after{content:"no fit";font-family:var(--font-mono);font-size:10px;position:absolute;bottom:4px;right:6px}.piece{gap:2px;display:grid}.piece span{background:0 0;width:16px;height:16px}.piece span.on.c1{background:var(--red)}.piece span.on.c2{background:var(--blue)}.piece span.on.c3{background:var(--yellow)}.piece span.on.c4{background:var(--black)}.drag-layer{pointer-events:none;z-index:50;position:fixed;top:0;left:0}.drag-layer .piece{gap:3px}.drag-layer .piece span{width:var(--cell);height:var(--cell);opacity:.9;box-shadow:0 6px 18px #00000040}.panel{border:3px solid var(--ink);background:var(--paper)}.panel+.panel{margin-top:16px}.panel-head{border-bottom:3px solid var(--ink);letter-spacing:.12em;text-transform:uppercase;background:var(--paper-2);justify-content:space-between;align-items:center;padding:10px 14px;font-size:12px;font-weight:900;display:flex}.panel-body{padding:14px}.stats{grid-template-columns:1fr 1fr;gap:10px 14px;display:grid}.stat{flex-direction:column;gap:2px;display:flex}.stat b{font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:1}.stat.big{grid-column:1/-1}.stat.big b{font-size:48px}.stat span{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);font-size:11px}.seed{font-family:var(--font-mono);word-break:break-all;color:var(--ink-2);font-size:11px}.gain{font-family:var(--font-mono);color:var(--ink);pointer-events:none;font-size:22px;font-weight:700;animation:.9s ease-out forwards rise;position:absolute}@keyframes rise{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}.btn{border:3px solid var(--ink);background:var(--paper);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font-size:12px;font-weight:800;transition:transform 80ms;display:inline-flex}.btn:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.btn:active{box-shadow:none;transform:translate(0)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.btn.primary{background:var(--ink);color:var(--paper)}.btn.red{background:var(--red);color:#fff}.btn.yellow{background:var(--yellow)}.btn.blue{background:var(--blue);color:#fff}.btn.small{padding:7px 10px;font-size:11px}.btn.block{width:100%}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stack{flex-direction:column;gap:10px;display:flex}.muted{color:var(--ink-2);font-size:13px;line-height:1.45}.tiny{font-size:11px}.input{font-family:var(--font-mono);border:3px solid var(--ink);background:#fff;width:100%;padding:9px 10px;font-size:14px}label.field{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);flex-direction:column;gap:4px;font-size:11px;display:flex}.notice{border:3px solid var(--ink);background:var(--yellow);padding:10px 12px;font-size:13px;line-height:1.4}.notice.error{background:#f3c7c7}.notice.ok{background:#d7f0df}.duel-list{flex-direction:column;gap:10px;display:flex}.duel-card{border:3px solid var(--ink);background:#fff;flex-direction:column;gap:6px;padding:10px 12px;display:flex}.duel-card .top{justify-content:space-between;align-items:center;gap:8px;display:flex}.duel-card .who{font-family:var(--font-mono);color:var(--ink-2);font-size:11px}.pill{font-family:var(--font-mono);border:2px solid var(--ink);text-transform:uppercase;padding:2px 6px;font-size:10px}.pill.open{background:var(--yellow)}.pill.active{background:#cfe0ff}.pill.settled{background:#d7f0df}.pill.cancelled{background:#ddd}.scoreline{font-family:var(--font-mono);justify-content:space-between;font-size:13px;display:flex}.scoreline b{font-size:18px}.winner{font-weight:900}.verify{font-family:var(--font-mono);font-size:12px;line-height:1.6}.verify .hex{word-break:break-all;background:var(--paper-2);border:2px solid var(--ink);max-height:80px;padding:8px;font-size:11px;overflow:auto}.check{align-items:baseline;gap:8px;display:flex}.check:before{content:"■";color:var(--green)}.check.pending:before{content:"□";color:var(--ink-2)}.check.fail:before{content:"✕";color:var(--red)}.explainer{border-top:3px solid var(--ink);margin-top:40px;padding-top:24px}.explainer h2{letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;font-size:22px;font-weight:900}.steps{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}@media (max-width:480px){.steps{grid-template-columns:1fr}}.step{border:3px solid var(--ink);background:#fff;min-height:150px;padding:14px}.step .n{color:#fff;place-items:center;width:34px;height:34px;margin-bottom:10px;font-size:16px;font-weight:900;display:inline-grid}.step .n.red{background:var(--red)}.step .n.blue{background:var(--blue)}.step .n.yellow{background:var(--yellow);color:var(--ink)}.step .n.black{background:var(--black)}.step h3{letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;font-size:14px}.step p{color:var(--ink-2);margin:0;font-size:13px;line-height:1.45}.footer{color:var(--ink-2);flex-wrap:wrap;gap:14px;margin-top:28px;font-size:12px;display:flex}@media (max-width:480px){:root{--cell:38px}.brand h1{font-size:22px}.tab{padding:9px 12px;font-size:12px}}@media (max-width:380px){:root{--cell:34px}}
