/* New-captain safety net: hit glow (js/hit-glow.js), touch sail buttons (js/touch-sail.js), the speed readout and the
   aground prompt (js/aground.js), and the red danger sea banner (js/world-seas.js). */

/* Hit glow: a red bar on the screen edge toward the shooter; one per 22.5 degrees, each flashes and fades */
#hitGlow { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
#hitGlow i { position: absolute; left: 50%; top: 50%; width: 14px; height: min(26vh, 150px); margin: calc(min(26vh, 150px) / -2) 0 0 -7px;
  border-radius: 8px; opacity: 0; transform: translate(calc(var(--cx) * (50vw - 18px)), calc(var(--cy) * (50vh - 18px))) rotate(var(--a));   /* on the screen edge, along the bearing */
  background: radial-gradient(ellipse at 50% 50%, rgba(255,70,50,.95), rgba(255,70,50,.55) 55%, rgba(255,70,50,0) 100%); filter: drop-shadow(0 0 6px rgba(255,60,40,.8)); }
#hitGlow i.on { animation: glowFlash 1.1s ease-out; }
@keyframes glowFlash { 0% { opacity: 1; } 30% { opacity: .9; } 100% { opacity: 0; } }
body.on-title #hitGlow, body.on-pause #hitGlow { display: none; }

/* Speed readout next to the pause button; red when the ship is aground */
.speed-ind b { min-width: 3.6em; text-transform: none; font-variant-numeric: tabular-nums; }
.speed-ind.stuck { border-color: #d9493a; } .speed-ind.stuck b { color: #ff8a75; }

/* Aground: under the ship, like the dock ring's prompt */
#aground { position: fixed; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); z-index: 6; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
  font-size: calc(15px * var(--ts, 1)); font-weight: 700; text-align: center; color: #fff6ea; background: rgba(120,28,18,.88); border: 1px solid #ff8a75; border-radius: 3px; padding: 5px 12px; }
#aground[hidden] { display: none; }
body.on-title #aground, body.on-pause #aground { display: none; }

/* Touch sail buttons, bottom right above the hint (--hintH is the hint's height, js/notify-order.js) */
#touchSail { position: fixed; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 28px + var(--hintH, 36px)); z-index: 5;
  display: flex; align-items: stretch; background: rgba(8,34,45,.82); border: 1px solid rgba(246,241,227,.4); border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; }
#touchSail[hidden], body.on-title #touchSail, body.on-pause #touchSail { display: none; }
#touchSail button { appearance: none; border: 0; background: transparent; color: var(--foam, #f6f1e3); width: 52px; min-height: 52px; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
#touchSail button:active:not(:disabled) { background: rgba(246,241,227,.18); }
#touchSail button:disabled { opacity: .3; }
#touchSail .ts-txt { display: grid; align-content: center; justify-items: center; min-width: 64px; padding: 0 6px; line-height: 1.15; border-inline: 1px solid rgba(246,241,227,.2); }
#touchSail small { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
#touchSail b { font-size: 15px; color: #f0c766; white-space: nowrap; }
#touchSail[data-cap="0"] b { color: #ff8a75; }
#touchSail i { display: block; position: relative; width: 18px; height: 18px; }
#touchSail i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3.5px; margin-top: -1.75px; background: currentColor; border-radius: 2px; }
#touchSail i.tsp::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3.5px; margin-left: -1.75px; background: currentColor; border-radius: 2px; }

/* The captain's ability (js/abilities.js, #16): a round button at the bottom right, above the hint; on a touch screen above or beside the sail
   buttons, wherever it covers no HUD (abilityPlace sets left / top; right / bottom here are only the first frame's).
   --p is the share of the recharge (or of the smoke) still to run, drawn as a dark pie over the icon. */
#abilityBtn { position: fixed; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 28px + var(--hintH, 36px)); z-index: 5;
  width: 56px; height: 56px; padding: 0; border-radius: 50%; font-family: var(--f-ui); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; user-select: none;
  color: #f6f1e3; border: 2px solid rgba(246,241,227,.45); box-shadow: 0 2px 8px rgba(0,0,0,.45);
  background: conic-gradient(rgba(4,16,22,.78) calc(var(--p, 0) * 360deg), transparent 0) , rgba(8,34,45,.85); }
#abilityBtn[hidden], body.on-title #abilityBtn, body.on-pause #abilityBtn { display: none; }
#abilityBtn .ab-ic { grid-area: 1 / 1; width: 30px; height: 30px; }
#abilityBtn .ab-cd { grid-area: 1 / 1; font-size: 19px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-variant-numeric: tabular-nums; }
#abilityBtn .ab-key { position: absolute; right: -1px; bottom: -1px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 4px; font: 700 12px/20px var(--f-ui, sans-serif);
  color: #1b1410; background: #f0c766; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#abilityBtn .ab-key[hidden] { display: none; }
#abilityBtn[data-state="ready"] { border-color: #f0c766; animation: abReady 1.6s ease-in-out infinite; }
#abilityBtn[data-state="cool"] .ab-ic { opacity: .45; }
#abilityBtn[data-state="on"] { border-color: #cfc9bb; }
#abilityBtn[data-state="armed"] { border-color: #ff8a3a; color: #ffc27a; animation: abReady .8s ease-in-out infinite; }
#abilityBtn:active { transform: scale(.94); }
@keyframes abReady { 50% { box-shadow: 0 0 0 4px rgba(240,199,102,.35), 0 2px 8px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { #abilityBtn { animation: none !important; } }

/* The red sea banner: a sea far above the captain's rating (SEA_WARN_GAP, js/novice.js) */
#seaBanner[data-danger] small { color: #ff8a75; }
#seaBanner[data-danger] b { border-block-color: rgba(255,110,90,.8); color: #ffe3dc; }
#seaBanner[data-danger] span { opacity: 1; color: #ffd0c6; font-weight: 700; }
@media (max-height: 500px) { #seaBanner[data-danger] span { display: block; font-size: 13px; } }   /* a landscape phone still gets the warning line */

/* The way home (js/safety-hints.js, #114): under 40% hull a chip under the HUD bars points at the harbor and gives the distance. --barsB: where the bars end (js/notify-order.js) */
#homeChip { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(var(--barsB, 96px) + 6px); z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 8px;
  padding: 3px 12px 4px 8px; border-radius: 3px; background: rgba(60,12,10,.82); border: 1px solid rgba(255,110,90,.6); color: var(--foam); font-weight: 700; font-size: calc(14px * var(--ts, 1)); text-shadow: 0 1px 3px #000; }
#homeChip[hidden] { display: none; }
#homeChip i { width: 0; height: 0; border: 7px solid transparent; border-left: 12px solid #ffb199; border-right: 0; flex: none; }   /* a triangle pointing right, turned toward the harbor by script */
body.on-title #homeChip, body.on-pause #homeChip { display: none; }
@media (min-width: 1500px) and (min-height: 900px) { #homeChip { zoom: 1.25; } }
@media (min-width: 2400px) and (min-height: 1300px) { #homeChip { zoom: 1.5; } }