/* The expedition shares the reef's interface (../reef/reef.css). Its own pieces: the lantern
   (the dive's one resource, so it gets the most prominent readout), the chart inset, the
   return current, and the chart. */
#lantern{position:fixed;left:24px;bottom:92px;z-index:6;width:min(300px,calc(100vw - 48px));padding:13px 16px 12px;border-radius:14px;background:#04232bcc;border:1px solid #cfe7d62b;backdrop-filter:blur(8px);color:#f0eddd}
#lantern .lantern-head{display:flex;justify-content:space-between;align-items:baseline;font:11px "Geist Mono",monospace;letter-spacing:.14em;color:#e9cf98}
/* How fast it burns here: its own line under the tube, in the low-light colour. */
#lantern-rate{display:block;font:500 12px/1.3 Archivo,sans-serif;color:#ffb38a;margin:0 0 3px}
#lantern-rate:empty{display:none}
#lantern .lantern-head b{font:600 28px/1 Archivo,sans-serif;letter-spacing:-.03em;color:#fff2d6;font-variant-numeric:tabular-nums}
/* A glass tube, filled with warm light that shrinks as the lantern burns. */
.lantern-tube{position:relative;height:14px;margin:9px 0 8px;border-radius:999px;background:#0c3136;box-shadow:inset 0 1px 3px #0009,0 0 0 1px #e6c88a33;overflow:hidden}
.lantern-tube i{position:absolute;inset:0;transform-origin:left center;border-radius:inherit;background:linear-gradient(90deg,#c9853b,#f2c774 55%,#fff1c8);box-shadow:0 0 14px #f5c46a99;transition:transform .25s linear}
#lantern small{display:block;font-size:12px;line-height:1.35;color:#cfe0d6}
#lantern[data-low=true] .lantern-tube i{background:linear-gradient(90deg,#b6552f,#e98a4c);animation:lantern-low 1.1s ease-in-out infinite}
#lantern[data-low=true] .lantern-head b{color:#ffb38a}
@keyframes lantern-low{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){#lantern[data-low=true] .lantern-tube i{animation:none}}
/* The Space hint is on the Burst button already; the lantern takes its corner. */
#burst-hint{display:none}
/* The chart inset: always in view, on the left under the zoom; it follows your fish. */
#inset{position:fixed;left:24px;top:268px;z-index:5;width:124px;height:auto;aspect-ratio:150/160;border-radius:10px;border:1px solid #e6c88a44;box-shadow:0 6px 24px #0007;background:#041a20;image-rendering:auto}
/* The return current: the screen goes dark and the water carries you back. */
#spent{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#021217cc,#010a0df2);animation:spent-in .9s ease-out both}
#spent p{max-width:28ch;margin:0 24px;text-align:center;font:500 clamp(20px,2.4vw,30px)/1.3 Archivo,sans-serif;letter-spacing:-.02em;color:#f3e3c2}
@keyframes spent-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){#spent{animation:none}}
/* The chart: the map on the left, what you can do with it on the right. */
dialog#map{width:min(760px,calc(100vw - 28px))}
dialog#map[open]{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:18px 22px}
dialog#map>header{grid-column:1/-1}
#chart-canvas{width:min(250px,38vw);height:auto;aspect-ratio:360/760;border-radius:10px;border:1px solid #e6c88a44;background:#041a20}
#chart-side{display:flex;flex-direction:column;gap:12px;min-width:0}
#chart-side>.back{margin-top:auto}
#chart-places{display:flex;flex-direction:column;gap:6px}
#chart-places button{display:flex;justify-content:space-between;gap:12px;text-align:left}
#chart-places button span{opacity:.75;font-size:12px}
#chart-places button:disabled{opacity:.55;cursor:default}
#chart-places{max-height:228px;overflow-y:auto}
#chart-places button{min-height:40px;padding:9px 14px}
body[data-spent] #interaction{display:none!important}
/* The tally: four small readouts, number first. */
#chart-tally{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#chart-tally div{padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid #cfe7d61f}
#chart-tally b{display:block;font:600 22px/1.1 Archivo,sans-serif;letter-spacing:-.02em;color:#fff2d6;font-variant-numeric:tabular-nums}
#chart-tally span{font-size:12px;opacity:.75}
/* The legend, in the chart's own marks. */
.chart-legend{display:grid;grid-template-columns:repeat(3,max-content);gap:6px 16px;margin:0;padding:0;list-style:none;font-size:12px;opacity:.85}
.chart-legend li{display:flex;align-items:center;gap:6px}
.chart-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart-legend .inked{background:#2f7d6d}.chart-legend .sketched{background:#173b3f;box-shadow:inset 0 0 0 1px #cfe7d633}
.chart-legend .post{border-radius:50%;background:#f0c27a}.chart-legend .unlit{border-radius:50%;box-shadow:inset 0 0 0 2px #f0c27a}
.chart-legend .pearl{width:8px;height:8px;border-radius:50%;background:#cdeee6}.chart-legend .pearl.tide{background:#f0a9c2}.chart-legend .stone{border-radius:50%;background:#0a2a2c;box-shadow:inset 0 0 0 1px #cfe7d633}
/* A post that needs a pearl you don't have: the button explains rather than acts. */
#interact[data-short=true]{background:none;border:0;box-shadow:none;color:#f3e3c2d9;font-weight:500;cursor:default;padding-left:4px}
.chart-note{margin:0;font-size:13px;opacity:.8}
/* Phone: the lantern takes the bottom-left corner opposite the task card, clear of the
   title, the zoom and the notices; the inset sits under the zoom. */
@media(max-width:700px){
 #lantern{left:14px;bottom:72px;width:calc(100vw - 222px);min-width:112px;max-width:210px;padding:9px 11px}
 #lantern .lantern-head{font-size:9px}
 #lantern .lantern-head b{font-size:20px}
 .lantern-tube{height:10px;margin:6px 0 5px}
 #lantern small{font-size:10px}
 #inset{left:15px;top:272px;width:84px}
 /* A single-line title (over interface.css's reef size), so the notice never covers a wrapped line. */
 body[data-ui=reef][data-zone] .location h1{font-size:24px;white-space:nowrap}
 #arrival{top:140px}
 .task p{font-size:12px;margin:6px 0 4px}
 .task .task-actions{display:none}
 #lantern-rate{font-size:10px}
 dialog#map{max-height:calc(100dvh - 24px);overflow-y:auto}
 dialog#map[open]{grid-template-columns:1fr;gap:12px}
 #chart-canvas{width:min(150px,44vw);justify-self:center}
 #chart-tally b{font-size:18px}
}
/* Film view clears the screen as on the reef; the lantern stays, since it's the dive. */
#inset{transition:opacity .6s ease}
body[data-film=on] #inset{opacity:0;pointer-events:none}