:root{font-family:system-ui,sans-serif;color:#18303e;background:#eeeae1;--navy:#152f40;--gold:#c6ae6f}*{box-sizing:border-box}body{margin:0}header,footer{padding:22px max(5vw,20px);background:var(--navy);color:white}header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}a{color:inherit}header span,.eyebrow,small{font-size:.75rem;letter-spacing:.08em}main{max-width:1200px;margin:auto;padding:28px 24px}h1{font-family:Georgia,serif;font-size:clamp(2.8rem,7vw,5rem);margin:10px 0}h2{font-family:Georgia,serif}p{line-height:1.6}.hero{max-width:820px;margin-bottom:30px}.panel{background:#fffdf7;border:1px solid #b1b9b9;border-radius:8px;padding:24px;margin-bottom:20px}.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dashboard>div{background:var(--navy);color:white;padding:18px;border-radius:6px}.dashboard strong{display:block;font-size:1.7rem;margin-top:8px}.map{width:100%;background:#183949;border-radius:8px;margin:18px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.deskhead{display:flex;justify-content:space-between;align-items:center;gap:20px}label{display:block;margin:14px 0;line-height:1.5}input:not([type=checkbox]),textarea,select{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #71838b;border-radius:4px;font:inherit}button{padding:12px 16px;min-height:44px;border:1px solid #71838b;border-radius:4px;background:#fff;color:var(--navy);font:inherit;cursor:pointer}button:hover{background:#e4e9ea}button:disabled{opacity:.55;cursor:default}.primary{background:var(--navy);color:white}.primary:hover{background:#315263}.actions{display:grid;gap:10px}.advisor{border-top:5px solid var(--gold)}.small{font-size:.88rem}.warning{background:#f0dfaf;padding:12px}.deskhead #clock{font-variant-numeric:tabular-nums;font-size:1.4rem}dialog{width:min(960px,94vw);max-height:90vh;overflow:auto;border:1px solid #71838b;border-radius:10px;padding:24px;background:#fffdf7;color:#18303e}dialog::backdrop{background:#0c202bd9}#tutorial{max-width:620px}#packet nav{display:flex;justify-content:space-between;align-items:center;margin:20px 0}#paper{border:1px solid #adb5b8;padding:22px;background:white;font-family:Georgia,serif}table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{padding:8px;border-bottom:1px solid #c3cbcb;text-align:left}.evidence{border-top:3px solid var(--gold);margin-top:24px}.evidence label{display:inline-block;width:46%;margin-right:3%}#index{display:flex;flex-wrap:wrap;gap:6px}#index button{font-size:.8rem}.resultline{padding:16px;border-left:4px solid var(--gold);background:#eaf0ef;margin:12px 0}.resultline strong{display:block}.reveal{animation:reveal .5s ease}@keyframes reveal{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}:focus-visible{outline:3px solid #b36b17;outline-offset:3px}[hidden]{display:none!important}footer{font-size:.85rem}summary{cursor:pointer;min-height:44px;padding:8px 0}#debrief details{margin:12px 0}#error{color:#912a20}@media(max-width:700px){.columns{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr 1fr}main{padding:16px}.panel{padding:18px}.evidence label{width:100%}.deskhead{flex-wrap:wrap}.map{min-height:130px}table{font-size:.75rem}th,td{padding:5px}}@media(prefers-reduced-motion:reduce){.reveal{animation:none}}@media print{header,button,#setup,#desk,#handoff,dialog,.map{display:none!important}body{background:white}main{max-width:none}.panel{break-inside:avoid}#debrief details{display:block}}
.packet-timer{position:sticky;top:-24px;background:#fffdf7;border-bottom:2px solid #c6ae6f;padding:10px;display:flex;justify-content:space-between;align-items:center;z-index:2}#paper{overflow-x:auto}blockquote{border-left:3px solid #c6ae6f;padding-left:16px;margin-left:0}
.playing .hero{max-width:none;margin-bottom:18px}.playing .hero h1{font-size:2rem}.playing .hero>.eyebrow,.playing .hero>p:nth-of-type(2){display:none}.playing .hero p{margin:8px 0}.convoy-marker{animation:sail 1.8s ease-in-out both;transform-box:view-box}@keyframes sail{0%{transform:translate(450px,65px)}50%{transform:translate(450px,var(--mid-y))}100%{transform:translate(var(--end-x),95px)}}@media(prefers-reduced-motion:reduce){.convoy-marker{animation:none}}
.convoy-marker text{animation:cargo-label 1.8s linear both}@keyframes cargo-label{0%,85%{opacity:0}100%{opacity:1}}@media(prefers-reduced-motion:reduce){.convoy-marker text{animation:none}}
#tutorial.lc-tutorial{max-width:780px}.lc-visual{padding:22px;background:#e6eeed;border:1px solid #a3b7b8;border-radius:8px;margin:20px 0}.lc-flow,.lc-routes{display:flex;gap:14px;flex-wrap:wrap}.lc-flow>span,.lc-routes>div{flex:1;min-width:130px;padding:16px;background:#fffdf7;border:1px solid #b6c2c2;border-radius:6px}.lc-routes p{font-size:.9rem}.lc-note{border-left:4px solid #ad8841;padding:12px 18px;background:#f3ecdb}.lc-crates{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.lc-crates i{width:30px;height:30px;background:linear-gradient(45deg,transparent 47%,#75552d 48%,#75552d 52%,transparent 53%),linear-gradient(-45deg,transparent 47%,#75552d 48%,#75552d 52%,transparent 53%),#d3b17c;border:3px solid #75552d;border-radius:2px;box-shadow:3px 3px 0 #b68e58}.lc-port{display:flex;gap:6px}.lc-port i{width:32px;height:22px;background:#d1d5d1;border:1px solid #536e73}.lc-port .intact{background:#326e72}.lc-comparison{display:flex;align-items:center;justify-content:center;gap:28px}.lc-comparison b{display:block;font-size:3rem}.lc-document{background:white;padding:22px;border:1px solid #899c9f;box-shadow:5px 5px 0 #c8d3d1}.lc-document>div{padding:14px;border-bottom:1px solid #b5c3c3}.lc-document .current{border-left:4px solid #386b62;background:#e3eee7}.lc-practice-sail{font-size:2.6rem;animation:lc-practice 1.2s ease-out both}#lcPractice{margin-top:18px}.dashboard strong{transition:color .4s}.map{border:1px solid #547986;box-shadow:0 7px 20px #172e4020}.lc-tutorial h2{font-size:1.8rem}@keyframes lc-practice{from{transform:translateX(0);opacity:.3}to{transform:translateX(55%);opacity:1}}@media(max-width:600px){.lc-visual{padding:14px}.lc-routes>div{min-width:100%}.lc-flow>span{min-width:100%}.lc-tutorial h2{font-size:1.4rem}}@media(prefers-reduced-motion:reduce){.lc-practice-sail{animation:none}.dashboard strong{transition:none}}
#portMeter{display:flex;gap:4px;margin-top:10px}#portMeter i{height:7px;flex:1;background:#61717a}#portMeter .intact{background:#9bd2c2}#portMeter.damaged .intact{background:#f3b480}.result-crates .lost{opacity:.35;box-shadow:none;position:relative}.result-crates .lost:after{content:'×';position:absolute;inset:-7px;color:#85211e;font-size:36px;text-align:center;font-weight:bold}.result-crates .arrived{animation:crate-arrives .8s ease-out both}@keyframes crate-arrives{from{opacity:.2;transform:translateY(-12px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.result-crates .arrived{animation:none}}
