/* ---------- Juice: kill pay flying to the HUD, the sale tally, Ship Lv / boss banners, kill flash, sea grade ---------- */
/* the sea's light: brighter toward the centre and top, darker at the edges (under the HUD, over the canvas) */
#seaGrade { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 42%, rgba(255,250,225,.07) 0%, rgba(255,250,225,0) 45%, rgba(3,16,30,.16) 78%, rgba(3,16,30,.36) 100%); }
#jFlash { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: rgb(255,200,120); }

/* pay on its way to a HUD counter; the counters punch when it lands */
.jfly { position: fixed; z-index: 6; pointer-events: none; white-space: nowrap; font-weight: 700; font-size: calc(16px * var(--ts, 1));
  color: #ffe08a; text-shadow: 0 0 3px #0b2530, 0 1px 0 #0b2530, 1px 0 0 #0b2530, -1px 0 0 #0b2530, 0 -1px 0 #0b2530; will-change: transform, opacity; }
.jfly-streak { color: #9fe0a0; }
.jcoin { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c8, #f0c766 55%, #b5852a);
  box-shadow: 0 0 0 1px rgba(11,37,48,.7), 0 0 6px rgba(255,214,110,.7); }
#gold, #pGold, #lv { display: inline-block; transform-origin: center; }

/* the sale tally: a small dark-and-gold card, top-centre, over the ledger too */
#tally { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 136px); z-index: 15; pointer-events: none; min-width: 200px;
  transform: translate(-50%, -8px) scale(.92); opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.2,.9,.3,1.3);
  padding: 10px 18px 12px; text-align: center; border-radius: 4px; background: rgba(8,34,45,.88); border: 1px solid rgba(240,199,102,.55);
  box-shadow: 0 6px 22px rgba(0,0,0,.35); color: #f6f1e3; font-size: calc(14px * var(--ts, 1)); }
#tally.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (max-width: 600px) { #tally { top: calc(env(safe-area-inset-top, 0px) + 33vh); } }   /* clear of the phone's minimap */
#tally .t-sunk { display: flex; gap: 3px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
#tally .t-sunk span { margin-right: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: .8em; opacity: .8; }
#tally .t-sunk .jsk { width: 17px; height: 17px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
#tally .t-math b { color: #9fe0a0; }
#tally .t-gold { font-size: 1.9em; font-weight: 700; color: #f0c766; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
#tally .t-gold b { display: inline-block; }
#tally .t-gold small { font-size: .45em; text-transform: uppercase; letter-spacing: .08em; color: #f6f1e3; opacity: .8; }
#tally.done .t-gold b { animation: jPop .28s cubic-bezier(.2,.9,.3,1.4); }
#tally .t-best { margin-top: 4px; color: #ffd04a; font-weight: 700; letter-spacing: .04em; opacity: 0; }
#tally .t-rec { margin-top: 4px; font-size: .82em; letter-spacing: .04em; opacity: .7; }
#tally.done .t-best { opacity: 1; animation: jPop .35s cubic-bezier(.2,.9,.3,1.4); }

/* Ship Lv rise and a claimed bounty: a big word over the sea (or the ledger), in and out */
.jbanner { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 30vh); z-index: 16; pointer-events: none; text-align: center;
  transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.4);
  font-family: "IM Fell English SC", "Noto Serif TC", serif; color: #f6d27a; white-space: nowrap; max-width: calc(100vw - 32px);
  text-shadow: 0 2px 0 #1b1410, 0 0 12px rgba(0,0,0,.6), 2px 0 0 #1b1410, -2px 0 0 #1b1410; }
.jbanner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#lvBanner { font-size: calc(34px * var(--ts, 1)); }
#bossCard b { display: block; font-size: clamp(30px, 8vw, 64px); line-height: 1.05; white-space: normal; }
#bossCard small { display: block; font-family: "Barlow Semi Condensed", "Noto Sans TC", sans-serif; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; font-size: calc(15px * var(--ts, 1)); color: #f6f1e3; }

/* the dock ring's "sail out first" line: present, but quiet */
#moor.faint { opacity: .62; }

@keyframes jPop { from { transform: scale(1.35); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .jbanner, #tally { transition: opacity .2s; } }