/* Fixed pixel-art chart table. Only the sea canvas accepts course clicks. */
.navigation-deck{position:fixed;z-index:6;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(980px,calc(100vw - 36px));box-sizing:border-box;color:#f5dfad;border:4px solid #38261f;outline:2px solid #b17c43;box-shadow:inset 0 3px #ce9957,inset 0 -4px #493023,5px 6px 0 #06283799;background:repeating-linear-gradient(0deg,transparent 0 32px,#3b261d88 32px 35px,#b37d3b55 35px 37px),repeating-linear-gradient(90deg,#70472c 0 83px,#764c2d 83px 193px,#69432b 193px 271px);font:12px/1.4 'Courier New',monospace;padding:12px 18px 10px;isolation:isolate;max-height:calc(100dvh - 100px);overflow:auto;scrollbar-width:thin}
.navigation-deck::before,.navigation-deck::after{content:'';position:absolute;top:9px;width:6px;height:6px;background:#cca36b;box-shadow:2px 2px #30251d,0 138px #cca36b,2px 140px #30251d;pointer-events:none}.navigation-deck::before{left:6px}.navigation-deck::after{right:6px}
.deck-header{display:flex;gap:20px;align-items:center;justify-content:space-between;border-bottom:2px solid #36251c80;padding-bottom:9px;margin-bottom:12px;box-shadow:0 1px #b5884b66}.deck-title{display:flex;align-items:center;gap:10px;font-weight:bold;letter-spacing:1.4px;font-size:11px;text-shadow:2px 2px #38251d}.deck-title>span:first-child{color:#f0c36c;font-size:24px}.deck-position{display:flex;gap:12px;align-items:center;margin-left:auto}.deck-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#e2c28d}.deck-position output{padding:5px 9px;background:#2f2d27;border:2px solid #b68e56;color:#f5dfad;font-weight:bold;white-space:nowrap;font-variant-numeric:tabular-nums}
.navigation-deck button{font:inherit;color:#f7e5bc;border:2px solid #bc8e50;border-right-color:#503522;border-bottom-color:#422e20;border-radius:0;background:#7e5831;box-shadow:inset 0 2px #cf9c5055,2px 2px #33261b;cursor:pointer;min-height:34px;padding:6px 10px;touch-action:manipulation;line-height:1.35}
.navigation-deck button:hover{background:#926b3e}.navigation-deck button:active,.navigation-deck button.held{transform:translate(1px,1px);background:#503c29;box-shadow:inset 2px 2px #30261d}.navigation-deck button:focus-visible{outline:3px solid #fbe7ae;outline-offset:3px}.navigation-deck button:disabled{cursor:default;opacity:.6}.navigation-deck button[hidden],.navigation-deck [hidden]{display:none!important}
#deck-toggle{min-width:32px;font-size:19px;padding:0 7px;min-height:30px}.deck-body{display:grid;grid-template-columns:118px minmax(0,1fr) 245px;gap:12px 20px}.deck-helm{display:grid;align-content:start;justify-items:center;gap:6px}.helm-pad{display:grid;grid-template:repeat(3,32px)/repeat(3,32px);gap:3px;filter:drop-shadow(2px 3px #34251e)}.helm-pad button{padding:0;min-height:32px;font-size:14px;touch-action:none;user-select:none}.helm-up{grid-area:1/2}.helm-left{grid-area:2/1}.helm-stop{grid-area:2/2}.helm-right{grid-area:2/3}.helm-down{grid-area:3/2}.deck-instruments{min-width:0}.deck-hull{background:#322e25;padding:8px 11px 9px;border:2px solid #b38a50;box-shadow:2px 2px #422c20}.instrument-heading{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:6px}.navigation-deck #vessel-status{color:#ffe5ad;font:bold 13px 'Courier New',monospace;white-space:nowrap}.navigation-deck progress{appearance:none;width:100%;height:12px;border:2px solid #182b29;display:block;background:#182b29;accent-color:#9ec17e}.navigation-deck progress::-webkit-progress-bar{background:#182b29}.navigation-deck progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,#99b969 0 13px,#698f54 13px 16px);box-shadow:inset 0 2px #d4de9880}.navigation-deck progress::-moz-progress-bar{background:#99b969}.deck-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:9px 0}.deck-stats>div{display:flex;flex-direction:column;gap:1px}.deck-stats span{font-size:10px;color:#e7c693}.deck-stats strong{font-size:13px;color:#fff0c3}.deck-tools{display:flex;gap:9px;align-items:center}.deck-tools #home{flex:1;font-size:11px}.deck-zoom{display:flex;align-items:center;gap:9px;background:#3d3024;padding:0 3px}.deck-zoom button{padding:0;min-width:32px;font-size:19px;min-height:32px}.deck-actions{display:flex;flex-direction:column;gap:9px;min-width:0}.navigation-deck #compose{display:flex;align-items:center;justify-content:center;gap:13px;min-height:63px;padding:10px 14px;background:#d8b66d;color:#382b1e;border:3px solid #f0d493;border-bottom-color:#8a6235;border-right-color:#8a6235;font-weight:bold;font-size:13px;text-align:left;text-shadow:none;box-shadow:3px 3px #3b2c20}.deck-bottle svg{width:25px;height:34px;flex-shrink:0;shape-rendering:crispEdges;filter:drop-shadow(2px 2px #8b693b)}.navigation-deck #special-move{position:static;max-width:none;width:100%;font:11px 'Courier New',monospace;padding:8px;min-height:34px;background:#38463c;border:2px solid #9da783;color:#f3dfa5;box-shadow:2px 2px #38291e}.navigation-deck #sailors{font-size:10px;color:#dfbf8c;opacity:1;text-align:center}.deck-event{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px 14px;align-items:center;border-top:2px solid #402d2088;padding-top:7px;font-size:10px;color:#ecd0a0}.deck-event>button{font-size:10px;flex:1}.deck-event #sea-omen{flex:1;min-width:180px}.navigation-deck.collapsed{padding-bottom:2px}.navigation-deck.collapsed .deck-header{border:0;box-shadow:none;margin:0}.navigation-deck.collapsed::after,.navigation-deck.collapsed::before{box-shadow:2px 2px #30251d}
#toast{bottom:275px;z-index:30}.target-hint{bottom:275px}.left-rail{max-height:calc(100dvh - 435px)}
@media(max-width:760px){.navigation-deck{width:calc(100vw - 20px);bottom:max(10px,env(safe-area-inset-bottom));padding:10px 12px 8px}.deck-header{gap:8px;margin-bottom:9px;padding-bottom:7px}.deck-title{font-size:9px;letter-spacing:.5px;max-width:140px}.deck-title>span:first-child{display:none}.deck-position{gap:5px}.deck-position .deck-label{display:none}.deck-position output{font-size:10px;padding:4px 6px}.deck-body{grid-template-columns:104px minmax(0,1fr);gap:9px 13px}.deck-actions{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:8px;align-items:stretch}.navigation-deck #compose{min-height:45px;padding:6px 9px;font-size:11px;gap:8px}.deck-bottle svg{width:18px;height:27px}.navigation-deck #special-move{height:100%;font-size:10px;padding:6px}.navigation-deck #sailors{display:none}.deck-hull{padding:6px 8px}.deck-stats{margin:7px 0}.deck-tools #home{font-size:10px;padding:4px}.deck-tools{gap:7px}.deck-zoom{gap:4px}.deck-zoom button{min-width:26px}.deck-event{font-size:9px;padding-top:5px}.deck-event #sea-omen{min-width:120px}.left-rail{max-height:calc(100dvh - 420px)}#toast,.target-hint{bottom:310px}}
@media(max-width:380px){.deck-title{font-size:8px;max-width:95px}.deck-body{grid-template-columns:94px minmax(0,1fr);gap:8px}.helm-pad{grid-template:repeat(3,29px)/repeat(3,29px)}.helm-pad button{min-height:29px}.deck-zoom>span{display:none}.deck-tools #home>span:first-child{display:none}.deck-position output{font-size:9px}.instrument-heading{font-size:10px}.deck-stats strong{font-size:11px}}
@media(max-height:560px){.navigation-deck{max-height:48dvh}.deck-header{margin-bottom:6px}.navigation-deck .deck-event{display:none}.left-rail{max-height:calc(52dvh - 135px)}#toast{bottom:50dvh}}
/* A pinned parchment target card, fixed to the navigation table. */
.navigation-deck{width:min(1160px,calc(100vw - 36px))}
.deck-body{grid-template-columns:108px minmax(190px,1fr) 220px 210px;gap:12px 18px;align-items:start}
.deck-target{min-width:0;padding:3px 3px 0}
.target-paper{position:relative;min-height:170px;padding:17px 12px 10px;color:#44301d;background:repeating-linear-gradient(0deg,#dfc38a 0 4px,#e3ca96 4px 8px);border:3px solid #aa8049;border-top-color:#f6dfab;box-shadow:3px 4px 0 #32251d99,inset 0 -3px #b9955d;clip-path:polygon(0 0,100% 0,100% 96%,96% 96%,96% 100%,74% 100%,74% 98%,48% 98%,48% 100%,22% 100%,22% 97%,0 97%)}
.paper-nail{position:absolute;top:4px;left:calc(50% - 4px);width:8px;height:8px;background:#748187;border:2px solid #3b4140;box-shadow:inset 2px 2px #c7c6ad,2px 3px 0 #8a673e;z-index:1}
.target-paper-heading{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:2px;font-weight:bold;font-size:10px;border-bottom:1px dashed #87643f;padding:0 0 5px;min-height:24px}
.navigation-deck #clear-target{color:#513726;background:transparent;border:0;box-shadow:none;min-height:22px;padding:0 5px;font-size:18px}
#target-empty{padding:24px 8px;text-align:center;font-size:12px;line-height:1.7;color:#6e5030}
#target-details{display:grid;grid-template-columns:64px minmax(0,1fr);gap:5px 9px;align-items:center;padding:9px 0 4px}
#target-portrait{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;grid-row:1/4;filter:drop-shadow(2px 3px 0 #88684066)}
#target-name{font-size:11px;line-height:1.4;overflow-wrap:anywhere;display:block;max-height:4.2em;overflow:auto}
#target-distance{font-size:10px;color:#725032}
#target-health{grid-column:1/-1;font-size:10px;text-align:center;display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}
#target-hp{height:9px;border-color:#846036;background:#987142}#target-hp::-webkit-progress-bar{background:#987142}#target-hp::-webkit-progress-value{background:#9b4032;box-shadow:inset 0 2px #cf8260}
.navigation-deck #approach-target{grid-column:1/-1;min-height:26px;font-size:10px;padding:3px;background:#b88e52;color:#38271c;border-color:#8c663c;box-shadow:1px 1px #947043}
.navigation-deck #normal-attack{background:#895136;color:#ffedbe;border-color:#d09a54;min-height:37px;font-size:11px}
#combat-status{font-size:10px;line-height:1.3;text-align:center;color:#ffe0a0;min-height:26px}
.navigation-deck #compose{min-height:48px;padding:6px 10px;font-size:11px}.deck-actions{gap:7px}
#toast,.target-hint{bottom:310px}
@media(max-width:980px){.deck-body{grid-template-columns:100px minmax(170px,1fr) 190px}.deck-target{grid-column:3;grid-row:1/3}.deck-actions{grid-column:1/3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.deck-actions #combat-status{grid-column:1/-1;min-height:0}.deck-actions #sailors{display:none}.navigation-deck #compose,.navigation-deck #normal-attack,.navigation-deck #special-move{height:48px;min-height:48px}.deck-event{grid-row:3}.left-rail{max-height:calc(100dvh - 470px)}}
@media(max-width:600px){.navigation-deck{width:calc(100vw - 20px);padding:8px 10px}.deck-body{grid-template-columns:82px minmax(0,1fr);gap:8px 12px}.deck-target{grid-column:1/-1;grid-row:2;padding:0}.target-paper{min-height:0;padding:12px 10px 8px}.target-paper-heading{position:absolute;top:12px;left:10px;width:65px;letter-spacing:0;display:block;border:0}.navigation-deck #clear-target{display:block;margin-top:5px}#target-details{margin-left:78px;grid-template-columns:45px 1fr auto;padding:0;gap:3px 7px}#target-portrait{width:45px;height:45px;grid-row:1/3}#target-name{grid-column:2/4;max-height:2.8em;font-size:10px}#target-distance{grid-column:2;grid-row:2}#target-health{grid-column:2/4;grid-row:3}#approach-target{grid-column:3!important;grid-row:2}#target-empty{padding:7px 4px 10px 80px;font-size:10px}.deck-actions{grid-column:1/-1;grid-row:3;gap:6px}.deck-event{grid-row:4}.helm-pad{grid-template:repeat(3,26px)/repeat(3,26px);gap:2px}.helm-pad button{min-height:26px}.deck-bottle svg{display:none}#toast,.target-hint{bottom:390px}.left-rail{max-height:calc(100dvh - 510px)}}