/* The 3D deck view on /strait-of-hormuz-3d. It is loaded only inside the view's own
   frame (see the "deck_doc" partial), never by the site's pages, so these
   rules and colours do not meet the site's stylesheet. */
:root { color-scheme: dark; --ink: #f2efe8; --ink2: rgba(242,239,232,.72); --glass: rgba(12,18,24,.46); --rule: rgba(255,255,255,.16); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1218; color: var(--ink);
  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#view.drag { cursor: grabbing; }
/* Inside a page: a vertical swipe scrolls the page, a sideways drag looks around. In full screen every drag looks around. */
body.hosted:not(.full) #view { touch-action: pan-y; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lm { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; text-align: center;
  font-size: 11px; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.9); will-change: transform; }
.lm i { display: block; width: 1px; height: 22px; margin: 2px auto 0; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); }
.lm small { opacity: .8; font-size: 10px; }
.lm.dim { opacity: .55; }
/* A ship at its last reported AIS position; the name opens the ship's page. */
.lm.ship { color: #ffdf94; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.9), 0 0 9px rgba(0,0,0,.55); }
.lm.ship span { pointer-events: auto; cursor: pointer; border-bottom: 1px dotted rgba(255,233,176,.6); }
.lm.ship:hover span, .lm.ship:focus-visible span { border-bottom-style: solid; }
.lm.ship i { background: linear-gradient(rgba(255,233,176,.85), rgba(255,233,176,0)); }

#top { position: fixed; left: 0; right: 0; top: 0; padding: 14px 18px 30px; display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  background: linear-gradient(rgba(6,10,14,.5), rgba(6,10,14,0)); pointer-events: none; }
#top > * { pointer-events: auto; }
.kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.v-name { margin: 2px 0 0; font: 600 20px/1.2 ui-serif, Georgia, "Times New Roman", serif; }
.sub { color: var(--ink2); }
.top-r { display: flex; gap: 6px; align-items: flex-start; justify-content: flex-end; max-width: 64vw; }
#vantages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#fs2 { flex: none; white-space: nowrap; }
#vantages button b { font-weight: inherit; }
[hidden] { display: none !important; }
button { font: inherit; color: var(--ink); background: var(--glass); border: 1px solid var(--rule); border-radius: 3px; padding: 6px 10px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
button:hover:not(:disabled) { background: rgba(40,52,64,.6); }
button:disabled { opacity: .5; cursor: default; }
button.on { background: rgba(242,239,232,.9); color: #10161c; border-color: transparent; }

#compass { position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%); width: min(560px, 70vw); height: 44px; pointer-events: none; }
#compass canvas { width: 100%; height: 44px; display: block; }
#readout { position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink);
  text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; white-space: nowrap; }

#panel { position: fixed; left: 18px; bottom: 60px; width: 290px; padding: 12px 14px; background: var(--glass); border: 1px solid var(--rule); border-radius: 4px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#panel { max-height: calc(100vh - 166px); overflow: auto; }
#pt { display: none; }
#panel.closed { width: auto; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#panel.closed #pbody { display: none; }
#panel.closed #pt, #panel.small #pt { display: inline-block; }
#panel.small:not(.closed) #pt { margin-bottom: 10px; }
#panel label { display: block; margin-bottom: 8px; }
#panel label span { display: flex; justify-content: space-between; color: var(--ink2); }
#panel label b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
#panel input[type=range] { width: 100%; margin: 3px 0 0; accent-color: #e9e3d4; }
#panel .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#panel .chk { display: inline-flex; gap: 5px; align-items: center; margin: 0; color: var(--ink2); }
.note { margin: 6px 0 0; color: var(--ink2); font-size: 12px; }
.stats { display: none; margin: 6px 0 0; color: rgba(242,239,232,.5); font-size: 11px; font-variant-numeric: tabular-nums; }
body.stats .stats { display: block; }

#attr { position: fixed; right: 0; bottom: 0; left: 0; padding: 5px 12px; font-size: 10.5px; color: rgba(255,255,255,.78); text-align: right;
  background: linear-gradient(rgba(6,10,14,0), rgba(6,10,14,.5)); }
#attr a { color: inherit; }
/* The site's address, always on the picture (also with the controls hidden), so screenshots and recordings carry it. */
#wm { display: block; margin: 0 0 3px; font: 700 13px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  color: rgba(255,255,255,.86); text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.9); pointer-events: none; -webkit-user-select: none; user-select: none; }
#hint { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); padding: 6px 12px; background: var(--glass); border: 1px solid var(--rule); border-radius: 3px;
  transition: opacity 1.2s; pointer-events: none; white-space: nowrap; }
#hint.off { opacity: 0; }
#warn { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(420px, 86vw); padding: 10px 14px; text-align: center;
  background: rgba(12,18,24,.72); border: 1px solid var(--rule); border-radius: 3px; pointer-events: none; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #0b1218; transition: opacity .8s; z-index: 5; }
#loading.off { opacity: 0; pointer-events: none; }
#loading .box { width: min(340px, 80vw); text-align: center; color: var(--ink2); }
#loading .bar { height: 2px; margin-top: 12px; background: rgba(255,255,255,.14); }
#loading .bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s; }
body.failed #loading .bar { display: none; }
#fade { position: fixed; inset: 0; background: #0b1218; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 4; }

body.noui #top, body.noui #panel, body.noui #compass, body.noui #readout, body.noui #hint, body.noui #warn, body.noui #labels { display: none; }
body.noui #attr { color: rgba(255,255,255,.45); }
#show { display: none; position: fixed; left: 12px; top: 12px; opacity: .45; font-size: 11px; padding: 4px 8px; }
#show:hover { opacity: 1; }
body.noui #show { display: block; }
body.shot #show { display: none; }

@media (max-width: 720px) {
  #panel { width: auto; right: 12px; left: 12px; bottom: 100px; padding: 10px 12px; }
  #panel.closed { right: auto; }
  #panel .note, #panel .stats { display: none; }
  .top-r { max-width: 100%; justify-content: space-between; width: 100%; }
  #vantages { justify-content: flex-start; }
  #top { flex-direction: column; gap: 8px; padding: 10px 12px 24px; }
  #compass { bottom: 40px; width: 92vw; }
  #readout { bottom: 84px; }
  #hint { display: none; }
  #attr { font-size: 9px; }
}

@media (max-height: 620px) {
  #panel { bottom: 112px; max-height: calc(100vh - 126px); }
  #panel .note, #panel .stats { display: none; }
  #hint { display: none; }
}

/* Narrow views (a phone, upright). Last, so that it also wins over the short-view rules above. */
@media (max-width: 560px) {
  #vantages { flex-wrap: nowrap; }
  #vantages button { min-width: 36px; padding: 6px 0; text-align: center; }
  #vantages button span { display: none; }
  #attr { padding: 4px 8px; line-height: 1.25; }
  #wm { font-size: 12px; }
  #compass { bottom: 76px; }
  #readout { bottom: 122px; width: 94vw; white-space: normal; text-align: center; font-size: 11px; }
  #panel { bottom: 160px; }
}