*{box-sizing:border-box}body{margin:0;background:#0b1524;color:#eaf3ff;font:16px system-ui,sans-serif;min-height:100svh}main{max-width:550px;margin:auto;padding:24px 18px 32px}header{display:flex;justify-content:space-between;align-items:center}.eyebrow{color:#68ead0;font-size:11px;font-weight:800;letter-spacing:.16em}h1{font-size:clamp(29px,7vw,42px);letter-spacing:-.05em;margin:12px 0 4px}p{color:#adbed2;line-height:1.5}.sub{margin:0 0 18px}.stats{display:flex;gap:10px;margin-bottom:12px}.stat{flex:1;padding:12px;background:#15263c;border:1px solid #263d57;border-radius:14px}.stat small{display:block;color:#a9bdd2;font-size:11px;letter-spacing:.1em}.stat strong{font-size:23px}#detail{min-height:42px;font-size:13px;color:#bed0e6;margin:12px 0}#board{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:9px;background:#07101c;border:1px solid #29405b;border-radius:18px;max-width:400px;margin:auto}.cell{aspect-ratio:1;min-width:0;min-height:34px;padding:0;border:1px solid #31465e;border-radius:9px;font-weight:850;font-size:18px;color:#081322;background:#172b40;touch-action:manipulation;position:relative}.cell.selected{outline:3px solid white;outline-offset:-3px}.cell.marked:after{content:'✦';position:absolute;right:2px;top:0;font-size:10px}.cell:focus-visible,button:focus-visible{outline:3px solid white;outline-offset:2px}button{font:inherit;cursor:pointer;border:1px solid #3a526e;border-radius:12px;background:#20344e;color:#eaf3ff;padding:12px;min-height:44px;touch-action:manipulation}button:hover{filter:brightness(1.15)}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.controls button{flex:1;font-size:14px}#message{min-height:48px;color:#68ead0;font-weight:650}details{border-top:1px solid #29405b;padding-top:16px}summary{cursor:pointer;font-weight:700}footer{color:#778fa9;font-size:11px;margin-top:24px}#piece{display:grid;grid-template-columns:repeat(4,14px);gap:2px;margin-top:5px}#piece span{width:14px;height:14px;border-radius:3px} .end{border:1px solid #68ead0;padding:12px;border-radius:12px} @media(max-width:360px){main{padding:15px 10px}.cell{min-height:30px;font-size:15px}#board{gap:4px}}
.cell.aim{outline:1px solid #ffffff70;outline-offset:-2px}.cell.frozen{outline:3px solid #aefaff;outline-offset:-4px}.cell{min-height:44px}#forecast{font-size:13px;color:#c6e4ed}@media(max-width:430px){main{padding:12px 8px}#board{gap:3px}.cell{font-size:18px}}

.cell.adjacent{outline:2px solid #d0f5ea;outline-offset:-3px}.cell.arrival:after{content:"↓";position:absolute;top:-4px;right:2px;color:white;font-size:20px;text-shadow:0 1px 3px black}.controls button{min-width:90px}

.cell.lane{outline:2px solid #d0f5ea;outline-offset:-3px}.cell.dock{border-right:4px solid #ffdb89}.cell{font-size:19px}

.cell.pin{background:#ffdf92!important;color:#182032}.cell.powered{background:#92f0cd!important}.cell.ghost{box-shadow:inset 0 0 0 3px #8adbb8}.cell.selected{outline:3px solid white;outline-offset:-3px}#tray{display:flex;gap:6px}#tray button{flex:1;font-size:13px;padding:8px}.chosen{outline:2px solid #ffdf92}

#board{grid-template-columns:repeat(7,1fr);gap:3px;padding:6px}.cell{min-height:42px;font-size:19px}.cell.exit{border-right:3px solid #ffdf92}.cell.footprint{box-shadow:inset 0 0 0 2px #9cf0cf}.cell.invalid{box-shadow:inset 0 0 0 2px #ff7a8f}.cell.selected{outline:2px solid white;outline-offset:-3px}#tools{display:flex;gap:6px;margin:12px 0}#tools button{flex:1;font-size:14px}.chosen{outline:2px solid #ffdf92}

#board{grid-template-columns:repeat(6,1fr)}.cell.ghost{outline:2px dashed white;outline-offset:-4px}.cell{aspect-ratio:1;min-height:40px}.cell.edge{border-color:#b5a0eb}

#board{grid-template-columns:repeat(6,1fr)}.cell{min-height:39px;aspect-ratio:1;font-size:18px}.cell.ghost{outline:2px dashed white;outline-offset:-4px}