.bridge-page{max-width:1080px}.bridge-shell{background:#fff;color:#17101f;color-scheme:light;border:3px solid #17101f;border-radius:18px;padding:clamp(1rem,3vw,1.6rem);box-shadow:8px 8px 0 #b79ce7}.bridge-top,.bridge-stats,.bridge-actions{display:flex;gap:.7rem;align-items:center;justify-content:space-between;flex-wrap:wrap}.bridge-top h2{margin:0}.bridge-top label{font-weight:800}.bridge-stats{margin:1rem 0}.bridge-stats div{min-width:82px;border:2px solid #17101f;border-radius:10px;padding:.4rem .6rem;background:#f6f0ff}.bridge-stats small,.bridge-stats strong{display:block}.bridge-stage{display:grid;place-items:center;padding:clamp(1rem,4vw,2rem);background:#17101f;border-radius:14px}.bridge-board{position:relative;width:min(72vw,560px);aspect-ratio:1;margin:24px}.bridge-edge{position:absolute;border:0;padding:0;background:transparent;z-index:1;touch-action:manipulation}.bridge-edge.horizontal{height:38px;transform:translateY(-50%)}.bridge-edge.vertical{width:38px;transform:translateX(-50%)}.bridge-edge span{display:block;position:absolute;background:#796b88;border-radius:99px}.bridge-edge.horizontal span{height:7px;left:18px;right:18px;top:15px}.bridge-edge.vertical span{width:7px;top:18px;bottom:18px;left:15px}.bridge-edge.active span{background:#b991ff;box-shadow:0 0 0 3px #fff}.bridge-edge:focus-visible{outline:3px solid #fff;outline-offset:1px}.bridge-node{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:#f3ebff;color:#17101f;z-index:3;display:grid;place-items:center;box-shadow:0 0 0 3px #17101f}.bridge-node strong{font-size:1.25rem;line-height:1}.bridge-node small{position:absolute;right:-7px;bottom:-9px;min-width:21px;height:21px;padding:1px;border-radius:50%;background:#17101f;color:#fff;text-align:center;font-weight:900}.bridge-node.matched{background:#b991ff}.bridge-node.wrong{background:#ffbfd0}.bridge-status,.bridge-note{font-weight:700}.bridge-status{min-height:1.5em}.bridge-actions{margin-top:.8rem}@media(max-width:600px){.bridge-shell{padding:.7rem}.bridge-board{width:min(78vw,500px);margin:22px}.bridge-stats div{min-width:66px}.bridge-actions button{flex:1 1 45%}.bridge-node{width:40px;height:40px}}
