/* chart.css - Sea chart minimap + full chart (Nectar). Filled discs only, solid borders, no pseudo-element art. */
#chartMini { right:calc(10px + var(--sar)); top:calc(186px + var(--sat)); width:116px; height:74px; padding:0; margin:0; border:2px solid #e3b25e; border-radius:14px; background:#0d3a52; overflow:hidden; touch-action:manipulation; cursor:pointer; }
#chartMini canvas { width:100%; height:100%; display:block; }
body.landed #chartMini, body.walking #chartMini, body.fighting #chartMini, body.charting #chartMini, #menu.show ~ #chartMini { display:none; }
/* B4 item 2: heading readout (wordless filled pointer), under the minimap; landscape: left of the minimap. Not a tap target. */
#chartHeading { right:calc(10px + var(--sar)); top:calc(266px + var(--sat)); width:44px; height:44px; border-radius:22px; background:#0d3a52; border:2px solid #e3b25e; box-sizing:border-box; pointer-events:none; display:none; }
#chartHeading.on { display:block; }
#chartHeading canvas { width:100%; height:100%; display:block; }
body.landed #chartHeading, body.walking #chartHeading, body.fighting #chartHeading, body.charting #chartHeading, #menu.show ~ #chartHeading { display:none; }
#chartFromJournal { display:block; width:100%; min-height:44px; margin:0 0 10px; font-size:15px; }
#chartFromLog { min-height:48px; min-width:120px; margin-right:10px; }
@media (max-height:480px) { #chartMini { top:calc(10px + var(--sat)); right:calc(136px + var(--sar)); width:104px; height:66px; } #chartHeading { top:calc(21px + var(--sat)); right:calc(248px + var(--sar)); } }
#chartRoot { position:fixed; inset:0; z-index:64; display:none; flex-direction:column; box-sizing:border-box; background:#081c28; color:#fff6dc;
  padding:calc(10px + var(--sat)) calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); gap:8px; }
#chartRoot.show { display:flex; }
#chartTitle { margin:0; font-size:22px; text-align:center; }
#chartWrap { flex:1; min-height:0; border-radius:14px; overflow:hidden; }
#chartCanvas { width:100%; height:100%; display:block; }
.chartBtns { display:flex; justify-content:center; }
#chartClose { box-sizing:border-box; border-style:solid; min-height:48px; min-width:140px; border-radius:24px; background:#e3b25e; color:#071a26; border-color:#e3b25e; touch-action:manipulation; }
@media (max-height:480px) { #chartRoot { flex-direction:row; align-items:stretch; } #chartTitle { writing-mode:horizontal-tb; font-size:18px; align-self:flex-start; max-width:90px; } .chartBtns { align-items:flex-end; } #chartClose { min-width:100px; } }