.twin-page{padding-bottom:5rem}.twin-shell{border:2px solid #120d1b;background:#fff;box-shadow:8px 8px 0 #b39aff;padding:clamp(1rem,3vw,2rem);margin-bottom:2.5rem}.twin-top{display:flex;align-items:end;justify-content:space-between;gap:1rem}.twin-top h2{margin:0}.twin-top label{display:grid;gap:.35rem;font-weight:800}.twin-top select{min-width:9rem;padding:.65rem;border:2px solid #120d1b;background:#fff;color:#120d1b;font:inherit}.twin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin:1rem 0}.twin-stats div{background:#f4efff;border:1px solid #120d1b;padding:.7rem}.twin-stats small{display:block;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.twin-stats strong{font-size:1.15rem}.twin-stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,3vw,2rem);background:#120d1b;padding:clamp(.8rem,2vw,1.3rem)}.twin-board-wrap h3{color:#fff;margin:0 0 .6rem;font-size:clamp(.85rem,2vw,1rem);text-transform:uppercase;letter-spacing:.06em}.twin-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;aspect-ratio:1;background:#4b3b63;border:3px solid #fff;padding:3px}.twin-cell{position:relative;background:#fff;min-width:0}.twin-cell.wall{background:#4b3b63}.twin-cell.goal{background:#eadfff;box-shadow:inset 0 0 0 4px #8b5cf6}.twin-cell.goal:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#5f35bd;font-weight:1000;font-size:clamp(1rem,4vw,2.4rem)}.twin-cell.robot:before{content:'';position:absolute;z-index:2;inset:17%;background:#120d1b;border:3px solid #b39aff;box-shadow:3px 3px 0 #8b5cf6}.twin-cell.robot:after{content:'••';position:absolute;z-index:3;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(.6rem,2vw,1rem);letter-spacing:.12em}.twin-status{min-height:2.8rem;margin:.9rem 0 .4rem;font-weight:800}.twin-controls{display:grid;grid-template-columns:repeat(3,minmax(3.2rem,5.2rem));grid-template-areas:'. up .' 'left down right';justify-content:center;gap:.55rem;margin:1rem 0}.twin-controls button{min-height:3.4rem;border:2px solid #120d1b;background:#f4efff;color:#120d1b;font:900 1.25rem/1 system-ui;box-shadow:3px 3px 0 #b39aff}.twin-controls [data-twin=up]{grid-area:up}.twin-controls [data-twin=left]{grid-area:left}.twin-controls [data-twin=down]{grid-area:down}.twin-controls [data-twin=right]{grid-area:right}.twin-controls button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #b39aff}.twin-actions{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}.twin-actions button{padding:.7rem 1rem;border:2px solid #120d1b;background:#fff;color:#120d1b;font:800 .9rem/1.1 system-ui}.twin-actions .primary{background:#120d1b;color:#fff}.twin-note{font-size:.92rem;line-height:1.6}.twin-key{display:inline-block;border:1px solid #120d1b;background:#fff;padding:.1rem .35rem;box-shadow:1px 1px 0 #b39aff;font-weight:900}@media(max-width:660px){.twin-top{align-items:stretch;flex-direction:column}.twin-top select{width:100%}.twin-stats{grid-template-columns:1fr 1fr}.twin-stage{grid-template-columns:1fr}.twin-board{max-width:420px;margin:auto}.twin-shell{box-shadow:5px 5px 0 #b39aff}.twin-cell.goal{box-shadow:inset 0 0 0 3px #8b5cf6}}