:root{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;color:#e7f2ef;background:#0b202b;font-synthesis:none;--N:#8dd9e6;--E:#ffd289;--S:#c1b6fc;--W:#9cddb3}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#174450 0,#0b202b 70%);min-height:100vh}main{max-width:510px;margin:auto;padding:18px 16px 26px}button,select,textarea{font:inherit}button,select{border:1px solid #507078;background:#183f49;color:#eef7f3;border-radius:10px;min-height:44px;padding:9px 12px;cursor:pointer}button:hover{background:#28505a}button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ffe09e;outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{display:flex;align-items:center;justify-content:space-between;gap:8px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:#a4c5c9;margin:0 0 3px}h1{font-size:31px;letter-spacing:-1px;margin:0}h1 span{color:#ffd289}header button{font-size:12px;padding:8px}h2{font-size:14px;margin:0}.shift-bar{display:flex;align-items:center;justify-content:space-between;margin:14px 0 12px;gap:8px}.shift-bar label{font-size:12px;color:#bad1d1}.shift-bar select{font-size:13px;padding:7px;min-height:40px;margin-left:4px}.shift-bar button{font-size:12px;padding:7px}.dashboard{display:grid;grid-template-columns:repeat(3,1fr);background:#09252e;border:1px solid #35535a;border-radius:13px;padding:10px}.dashboard div{text-align:center;border-right:1px solid #35535a}.dashboard div:last-child{border:0}small{display:block;font-size:9px;letter-spacing:1.6px;color:#b0c5c7}strong{font-size:24px;font-variant-numeric:tabular-nums}#route{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0;font-size:12px;color:#a4bfc3}.port{display:inline-flex;justify-content:center;align-items:center;border:1px solid #4d6970;border-radius:50%;width:30px;height:30px}.port.active{background:#ffe1a4;color:#193844;border-color:#ffe1a4;font-weight:bold}.deck-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.deck-title span{font-size:11px;color:#aac2c4}.deck-wrap{position:relative;margin:auto;max-width:290px;padding:22px}#deck{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:8px;background:#244b55;border:2px solid #66858a;border-radius:16px;box-shadow:0 12px 25px #0003}.cell{min-height:92px;padding:7px;border:1px dashed #729096;background:#17333f;position:relative}.cell .position{position:absolute;top:5px;left:7px;font-size:9px;letter-spacing:1px;opacity:.8}.cell .destination{display:block;font-size:35px;line-height:1.1;font-weight:800;margin-top:12px}.cell .crate-meta{font-size:10px}.cell.empty{font-size:24px;color:#a3c0c6}.crate{background:var(--crate);color:#173541;border-style:solid}.crate:hover{background:var(--crate);filter:brightness(1.05)}.selected{outline:3px solid #fff;outline-offset:2px}.edge{position:absolute;display:flex;align-items:center;justify-content:center;font-size:10px;color:#8daeb7;border-radius:4px}.edge.active{background:#ffe1a4;color:#14323b;font-weight:800}.north,.south{left:37px;right:37px;height:16px}.north{top:1px}.south{bottom:1px}.east,.west{top:37px;bottom:37px;width:16px}.east{right:1px}.west{left:1px}#message{min-height:42px;margin:4px 0 7px;font-size:12px;line-height:1.5;padding:8px 10px;border-left:3px solid #e5bd77;background:#102f39;border-radius:0 7px 7px 0}#jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.job{padding:7px 5px;text-align:left;min-height:56px;background:#173c46;border-color:#43636b;font-size:11px}.job strong{font-size:17px;color:var(--crate)}.job small{font-size:9px;letter-spacing:0;color:#c1d1d2;margin-top:3px}.job.done{opacity:.5}.job.away{background:#112e38}.job.selected{background:#2b525a}.job-number{font-size:10px;color:#b7cbcf}footer{margin-top:13px}#sail{display:grid;grid-template-columns:1fr 1fr;gap:8px}#sail button{background:#f5ce8a;color:#18353d;border-color:#f5ce8a;font-weight:700}.utility{display:flex;gap:7px;margin-top:8px}.utility button{flex:1;font-size:12px;padding:7px 5px}details{margin-top:16px;color:#aec5ca;font-size:12px;line-height:1.5}summary{cursor:pointer;padding:10px 0}#replay-panel{margin-top:15px;font-size:12px}textarea{width:100%;height:100px;background:#09202b;color:#e7f2ef;border:1px solid #77949a;border-radius:6px;padding:8px}.storage{font-size:11px;color:#b6c7c9;margin-bottom:0}@media(max-width:360px){main{padding:12px}.shift-bar{gap:3px}.shift-bar select{max-width:143px}.deck-wrap{max-width:260px}.cell{min-height:80px}}

.cell.target{border:2px solid #e9d295;background:#365b58;box-shadow:inset 0 0 0 2px #102e37}.target-label{font-size:13px;font-weight:750;color:#fff4cc}.cell.blocked{border:2px solid #fff0c7}.cell.blocked .crate-meta{font-size:9px;font-weight:650}.job[aria-pressed=true]{outline:3px solid #fff}

.eyebrow a{color:inherit;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}.eyebrow a:focus-visible{outline:3px solid #ffe09e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.shift-brief{font-size:12px;line-height:1.45;color:#c5d8d6;margin:0 0 12px}.shift-bar select{min-height:44px;max-width:190px}@media(max-width:360px){.shift-bar select{max-width:143px}}