[data-sailing-ui] {
  --ui-ivory: #f7f1dc;
  --ui-muted: rgba(239, 244, 229, .72);
  --ui-shadow: rgba(3, 22, 30, .86);
  --ui-yellow: #f5d56d;
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  color: var(--ui-ivory);
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 1px 3px var(--ui-shadow), 0 2px 14px rgba(3, 22, 30, .65);
}

[data-sailing-ui] *, [data-sailing-ui] *::before, [data-sailing-ui] *::after { box-sizing: border-box; }
[data-sailing-ui] [data-ui-candidate] { display: none; }
[data-sailing-ui="ribbon"] [data-ui-candidate="ribbon"] { display: flex; }
[data-sailing-ui="islands"] [data-ui-candidate="islands"] { display: flex; }
[data-sailing-ui="edges"] [data-ui-candidate="edges"] { display: block; }

/* All candidates inherit Open Edges' restraint: only instruments and type,
   never a full-width tray over the horizon. */
[data-controller="game"]:has([data-sailing-ui]) [data-game-target="compassBox"],
[data-controller="game"]:has([data-sailing-ui]) [data-game-target="rail"],
[data-controller="game"]:has([data-sailing-ui]) [data-game-target="helm"],
[data-controller="game"]:has([data-sailing-ui]) [data-game-target="banner"],
[data-controller="game"]:has([data-sailing-ui]) [data-game-target="status"],
[data-controller="game"]:has([data-sailing-ui]) [data-game-target="recenterButton"],
[data-controller="game"]:has([data-sailing-ui]) > .right-3.top-3 { display: none !important; }
[data-controller="game"]:has([data-sailing-ui="edges"]) [data-game-target="miniMapFrame"] { display: none !important; }

.sailing-ui__horizon,
.sailing-ui__watch { position: absolute; inset: max(.7rem, env(safe-area-inset-top)) 1.15rem auto; align-items: flex-start; justify-content: space-between; }
.sailing-ui__horizon { padding: 0 1.5rem; }

.sailing-ui__compass { position: relative; flex: none; border-radius: 50%; text-align: center; }
.sailing-ui__compass--horizon { width: 7rem; height: 7rem; }
.sailing-ui__compass--watch { width: 8rem; height: 8rem; border: 1px solid rgba(247, 241, 220, .18); background: radial-gradient(circle, rgba(5, 34, 43, .28), rgba(5, 34, 43, .08) 62%, transparent 64%); backdrop-filter: blur(2px); }
.sailing-ui__rose { position: absolute; inset: .25rem; transition: transform .2s linear; }
.sailing-ui__rose::before, .sailing-ui__rose::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(247, 241, 220, .38); border-radius: 50%; }
.sailing-ui__rose::after { inset: 29%; border-color: rgba(247, 241, 220, .22); }
.sailing-ui__rose i { position: absolute; z-index: 1; font: 600 .52rem ui-serif, Georgia, serif; font-style: normal; letter-spacing: .08em; }
.sailing-ui__rose .north { top: 0; left: 50%; transform: translateX(-50%); color: var(--ui-yellow); }
.sailing-ui__rose .east { right: 0; top: 50%; transform: translateY(-50%); }
.sailing-ui__rose .south { bottom: 0; left: 50%; transform: translateX(-50%); }
.sailing-ui__rose .west { left: 0; top: 50%; transform: translateY(-50%); }
.sailing-ui__rose-ticks { position: absolute; inset: 12%; border-radius: 50%; background: repeating-conic-gradient(from -1deg, rgba(247,241,220,.6) 0 1deg, transparent 1deg 15deg); mask: radial-gradient(transparent 61%, #000 62% 68%, transparent 69%); }
.sailing-ui__lubber { position: absolute; top: -.35rem; left: 50%; transform: translateX(-50%); color: var(--ui-yellow); font-size: .65rem; }
.sailing-ui__compass > b { position: absolute; top: 2.55rem; left: 0; right: 0; font: 500 1.35rem ui-serif, Georgia, serif; }
.sailing-ui__compass--watch > b { top: 3rem; }
.sailing-ui__compass > small { position: absolute; top: 4.15rem; left: 0; right: 0; color: var(--ui-muted); font-size: .58rem; letter-spacing: .08em; }
.sailing-ui__compass--watch > small { top: 4.7rem; }

.sailing-ui__anchor-cue { position: absolute; left: 50%; top: .15rem; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; min-width: 13.5rem; justify-content: center; padding: .45rem .8rem; text-align: left; }
.sailing-ui__anchor-mark { font-size: 1.4rem; line-height: 1; }
.sailing-ui__anchor-cue b, .sailing-ui__anchor-cue small { display: block; }
.sailing-ui__anchor-cue b { font: 500 .87rem ui-serif, Georgia, serif; }
.sailing-ui__anchor-cue small { margin-top: .12rem; color: var(--ui-muted); font-size: .56rem; }
.sailing-ui__anchor-cue--watch { top: .35rem; border-bottom: 1px solid rgba(247,241,220,.22); }

.sailing-ui__wind { display: flex; align-items: center; gap: .75rem; min-width: 10rem; }
.sailing-ui__wind-vane { display: block; width: 3.25rem; height: 3.25rem; font: 400 3rem/1 ui-serif, Georgia, serif; color: var(--ui-ivory); transform-origin: center; transition: transform .25s linear; }
.sailing-ui__wind small, .sailing-ui__wind b, .sailing-ui__wind em { display: block; }
.sailing-ui__wind small { color: var(--ui-muted); font-size: .5rem; letter-spacing: .16em; }
.sailing-ui__wind b { margin-top: .08rem; font: 500 1.2rem ui-serif, Georgia, serif; }
.sailing-ui__wind em { max-width: 8rem; margin-top: .12rem; color: var(--ui-muted); font-size: .53rem; font-style: normal; }
.sailing-ui__wind--watch { width: 9rem; height: 9rem; justify-content: center; border-radius: 50%; border: 1px solid rgba(247,241,220,.18); background: radial-gradient(circle, rgba(5,34,43,.27), rgba(5,34,43,.07) 64%, transparent 66%); }
.sailing-ui__wind--watch .sailing-ui__wind-vane { width: 3.7rem; height: 3.7rem; font-size: 3.45rem; }

.sailing-ui__edge-course { position: absolute; top: 1rem; left: 1rem; width: 10rem; height: 6.5rem; }
.sailing-ui__edge-rose { position: absolute; left: -2.9rem; top: -3rem; width: 9.5rem; height: 9.5rem; border: 1px solid rgba(247,241,220,.22); border-radius: 50%; transition: transform .2s linear; }
.sailing-ui__edge-rose::after { content: ""; position: absolute; inset: .5rem; border: 1px dashed rgba(247,241,220,.2); border-radius: 50%; }
.sailing-ui__edge-rose i { position: absolute; font: 600 .5rem ui-serif, Georgia, serif; font-style: normal; }
.sailing-ui__edge-rose i:nth-child(1) { top: .35rem; left: 50%; color: var(--ui-yellow); }
.sailing-ui__edge-rose i:nth-child(2) { right: .35rem; top: 50%; }
.sailing-ui__edge-rose i:nth-child(3) { bottom: .35rem; left: 50%; }
.sailing-ui__edge-rose i:nth-child(4) { left: .35rem; top: 50%; }
.sailing-ui__edge-lubber { position: absolute; left: 1.55rem; top: -.2rem; color: var(--ui-yellow); font-size: .65rem; }
.sailing-ui__edge-course > span:last-child { position: absolute; left: 4.3rem; top: .3rem; white-space: nowrap; }
.sailing-ui__edge-course small, .sailing-ui__edge-course b, .sailing-ui__edge-course em { display: block; }
.sailing-ui__edge-course small, .sailing-ui__edge-wind small { color: var(--ui-muted); font-size: .48rem; letter-spacing: .17em; }
.sailing-ui__edge-course b { font: 500 1.4rem ui-serif, Georgia, serif; }
.sailing-ui__edge-course em { color: var(--ui-muted); font-size: .58rem; font-style: normal; }
.sailing-ui__anchor-cue--edge { top: 1rem; }
.sailing-ui__edge-wind { position: absolute; top: .6rem; right: 1.25rem; display: flex; align-items: center; gap: .75rem; text-align: right; }
.sailing-ui__edge-wind .sailing-ui__wind-vane { width: 4.25rem; height: 4.25rem; font-size: 4rem; }
.sailing-ui__edge-wind small, .sailing-ui__edge-wind b, .sailing-ui__edge-wind em { display: block; }
.sailing-ui__edge-wind b { font: 500 1.35rem ui-serif, Georgia, serif; }
.sailing-ui__edge-wind em { max-width: 9rem; color: var(--ui-muted); font-size: .52rem; font-style: normal; }

/* Yellow is functional, never decorative: north reference plus an anchorage
   that will catch the boat. Anchored changes to a quiet sea-glass green. */
[data-anchor-state="armed"] [data-ui-anchor] { color: var(--ui-yellow); filter: drop-shadow(0 0 .55rem rgba(245,213,109,.42)); }
[data-anchor-state="anchored"] [data-ui-anchor] { color: #b9ead4; }

.sailing-ui__touch-hint { display: none; position: absolute; bottom: 12%; width: 28%; height: 42%; border: 1px dashed rgba(255,255,255,.48); color: rgba(255,255,255,.86); align-items: flex-end; justify-content: center; padding: .75rem; font-size: .58rem; letter-spacing: .06em; }
[data-sailing-guides="1"] .sailing-ui__touch-hint { display: flex; }
.sailing-ui__touch-hint--left { left: 3%; border-radius: 50% 15% 15% 50%; }
.sailing-ui__touch-hint--center { left: 36%; width: 28%; height: 18%; border-radius: 50%; }
.sailing-ui__touch-hint--right { right: 3%; border-radius: 15% 50% 50% 15%; }

[data-controller="game"]:has([data-welcome-back].is-visible) [data-sailing-ui] { opacity: .34; transition: opacity .3s; }

@media (max-width: 640px) {
  .sailing-ui__horizon, .sailing-ui__watch { inset-inline: .5rem; }
  .sailing-ui__horizon { padding: 0; }
  .sailing-ui__compass--horizon { width: 5.8rem; height: 5.8rem; }
  .sailing-ui__compass--watch { width: 6.4rem; height: 6.4rem; }
  .sailing-ui__compass > b { top: 2rem; font-size: 1.08rem; }
  .sailing-ui__compass--watch > b { top: 2.3rem; }
  .sailing-ui__compass > small { top: 3.35rem; }
  .sailing-ui__compass--watch > small { top: 3.75rem; }
  .sailing-ui__anchor-cue { top: -.05rem; min-width: auto; width: 9rem; padding: .35rem .2rem; gap: .38rem; }
  .sailing-ui__anchor-cue small { display: none; }
  .sailing-ui__anchor-mark { font-size: 1.1rem; }
  .sailing-ui__wind { min-width: 6rem; gap: .25rem; }
  .sailing-ui__wind-vane { width: 2.65rem; height: 2.65rem; font-size: 2.45rem; }
  .sailing-ui__wind em { display: none; }
  .sailing-ui__wind--watch { width: 6.7rem; height: 6.7rem; }
  .sailing-ui__wind--watch .sailing-ui__wind-vane { width: 2.8rem; height: 2.8rem; font-size: 2.6rem; }
  .sailing-ui__edge-course { left: .35rem; transform: scale(.86); transform-origin: top left; }
  .sailing-ui__edge-wind { right: .55rem; transform: scale(.86); transform-origin: top right; }
  /* The edge instruments consume both upper corners on a phone. Drop the
     anchorage cue one line so its text never crosses the compass or vane. */
  .sailing-ui__anchor-cue--edge { top: 4.6rem; }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .sailing-ui__horizon { padding: 0 .5rem; }
  .sailing-ui__wind--watch { width: 8rem; height: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sailing-ui__rose,
  .sailing-ui__edge-rose,
  .sailing-ui__wind-vane,
  [data-sailing-ui] { transition: none !important; }
}