/* Sol Voyage interface (owner 2026-10-04): sv-hud - loaded after the page styles in index.html, so it overrides them.
   The HUD pieces that are not windows: the ship's log (a navy glass-and-gilt plate, no parchment scroll), the notices
   in it (hud.toast), the tooltip, the bar's plates / ribbon / seals / tags, the docking payout sheet, the account strip
   (top right, same place) and the in-world name plates (.wlabel, drawn from CSS). The layout of the bar, the brass
   compass and the orbs are kept; only the parchment, the wood and the wax become navy and gilt, as in the logo. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cinzel:wght@500..800&family=Alegreya:ital,wght@0,400..800;1,400..700&display=swap");

:root {
  /* local helpers (svh = sv-hud), built on the shared --sv-* tokens with their fallbacks */
  --svh-gold-text: var(--sv-gold-grad, linear-gradient(180deg, #fbe7a6 0%, #e7b553 38%, #b37a2a 62%, #f0cd78 100%));
  --svh-panel: var(--sv-panel-bg, radial-gradient(120% 90% at 20% 0%, rgba(63, 147, 168, .22), transparent 55%), linear-gradient(180deg, #12344a 0%, #0b2536 55%, #071a26 100%));
  --svh-frame: var(--sv-frame, 0 0 0 1px #15100c, 0 0 0 4px #c98f2e, 0 0 0 5px #15100c, inset 0 0 0 1px rgba(246, 217, 138, .35), 0 18px 40px rgba(0, 0, 0, .55));
  --svh-frame-sm: 0 0 0 1px var(--sv-iron, #15100c), 0 0 0 3px var(--sv-gold-500, #c98f2e), 0 0 0 4px var(--sv-iron, #15100c), inset 0 0 0 1px rgba(246, 217, 138, .3), 0 6px 14px rgba(0, 0, 0, .55);
  --svh-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11c8-6 16-6 24 0s16 6 24 0 12-5 16-3' fill='none' stroke='%23e9f3f2' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
  --svh-c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23e7b553' stroke-linecap='round'%3E%3Cpath d='M2 21V7a5 5 0 0 1 5-5h14' stroke-width='1.5'/%3E%3Cpath d='M5 17V9a4 4 0 0 1 4-4h8' stroke-width='.8' stroke-opacity='.65'/%3E%3C/g%3E%3Cpath fill='%23f6d98a' d='M9.5 5.6c1 1.3 1 2.8 0 4-1-1.2-1-2.7 0-4zM6.4 8.2c1.6-.2 2.6.6 3.1 1.9-1.5.3-2.6-.3-3.1-1.9zm6.2 0c-1.6-.2-2.6.6-3.1 1.9 1.5.3 2.6-.3 3.1-1.9zM8 10.5h3v.9H8z'/%3E%3C/svg%3E");
  --svh-c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23e7b553' stroke-linecap='round'%3E%3Cpath d='M2 21V7a5 5 0 0 1 5-5h14' stroke-width='1.5'/%3E%3Cpath d='M5 17V9a4 4 0 0 1 4-4h8' stroke-width='.8' stroke-opacity='.65'/%3E%3C/g%3E%3Cpath fill='%23f6d98a' d='M9.5 5.6c1 1.3 1 2.8 0 4-1-1.2-1-2.7 0-4zM6.4 8.2c1.6-.2 2.6.6 3.1 1.9-1.5.3-2.6-.3-3.1-1.9zm6.2 0c-1.6-.2-2.6.6-3.1 1.9 1.5.3 2.6-.3 3.1-1.9zM8 10.5h3v.9H8z'/%3E%3C/g%3E%3C/svg%3E");
  --svh-c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 24) scale(1 -1)'%3E%3Cg fill='none' stroke='%23e7b553' stroke-linecap='round'%3E%3Cpath d='M2 21V7a5 5 0 0 1 5-5h14' stroke-width='1.5'/%3E%3Cpath d='M5 17V9a4 4 0 0 1 4-4h8' stroke-width='.8' stroke-opacity='.65'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --svh-c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 24) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23e7b553' stroke-linecap='round'%3E%3Cpath d='M2 21V7a5 5 0 0 1 5-5h14' stroke-width='1.5'/%3E%3Cpath d='M5 17V9a4 4 0 0 1 4-4h8' stroke-width='.8' stroke-opacity='.65'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --svh-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f6d98a' stroke='%2315100c' stroke-width='.6' d='M8 .8 9.3 6.7 15.2 8 9.3 9.3 8 15.2 6.7 9.3.8 8l5.9-1.3z'/%3E%3C/svg%3E");
  --svh-corners: var(--svh-c-tl) left 3px top 3px / 22px 22px no-repeat, var(--svh-c-tr) right 3px top 3px / 22px 22px no-repeat, var(--svh-c-bl) left 3px bottom 3px / 22px 22px no-repeat, var(--svh-c-br) right 3px bottom 3px / 22px 22px no-repeat;
  --svh-divider: var(--svh-star) center bottom / 11px 11px no-repeat, linear-gradient(90deg, transparent, var(--sv-gold-500, #c98f2e) 18%, var(--sv-gold-300, #f6d98a) 50%, var(--sv-gold-500, #c98f2e) 82%, transparent) center bottom 5px / 100% 1px no-repeat;
  --svh-cream: var(--sv-cream, #f3e6c8);
  --svh-sub: #9fc6cf;
}

/* ================= the ship's log: a navy glass-and-gilt plate ================= */
#feed {
  color: var(--svh-cream); border-radius: 6px; padding: 6px 9px 4px;
  filter: none; box-shadow: var(--svh-frame-sm);
  background: var(--svh-corners), var(--svh-waves) 0 0 / 64px 22px, var(--svh-panel);
  animation: svhOpen .16s ease-out;
}
#feed::before { content: none; -webkit-mask: none; mask: none; }
#feed::after { /* a thin rope line inside the gold border */
  content: ""; position: absolute; inset: 5px; border-radius: 3px; pointer-events: none; z-index: 0;
  border: 1px solid transparent;
  background: repeating-linear-gradient(135deg, rgba(231, 181, 83, .42) 0 2px, rgba(74, 47, 18, .5) 2px 4px) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}
#feed .log-roll { display: none; }
#feed .feed-hd {
  position: relative; z-index: 1; min-height: 30px; padding: 3px 10px 12px; justify-content: center;
  background: var(--svh-divider); box-shadow: none; color: var(--sv-gold-300, #f6d98a);
  font: 700 15px/1.1 "Cinzel Decorative", "Cinzel", serif; letter-spacing: .06em; text-transform: uppercase;
}
#feed .feed-hd > span:first-of-type {
  background: var(--svh-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #15100c) drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
#feed .feed-hd > span:first-of-type::first-letter { color: inherit; font-size: 1em; }
#feed .feed-hd::before { width: 6px; height: 6px; background: var(--svh-gold-text); box-shadow: 0 0 0 1px #15100c; }
#feed .feed-hd svg { color: var(--sv-gold-400, #e7b553); margin-left: auto; }
#feed .feed-hd:hover:not(:disabled) { background: var(--svh-divider), rgba(246, 217, 138, .06); }
#feed .feed-hd:active:not(:disabled) { box-shadow: none; transform: translateY(1px); }
#feed .feed-hd:focus-visible { outline: 2px solid var(--sv-gold-300, #f6d98a); outline-offset: 1px; }
#feed .feed-last { color: var(--svh-cream); font: italic 400 13px/1.2 "Alegreya", serif; text-transform: none; letter-spacing: 0; }
#feed .feed-last.note { font-style: normal; font-weight: 600; color: var(--sv-gold-300, #f6d98a); }
#feed .feed-hd .new { background: var(--sv-gold-400, #e7b553); box-shadow: 0 0 0 2px rgba(7, 26, 38, .9), 0 0 6px rgba(246, 217, 138, .7); }
#feed[data-fold=yes] .feed-hd { padding-bottom: 3px; background: transparent; justify-content: flex-start; }
#feed[data-fold=yes] { padding-bottom: 6px; }
#feedList { position: relative; z-index: 1; padding: 2px 4px 14px 2px; }
#feedList::-webkit-scrollbar-thumb { background: rgba(231, 181, 83, .45); }
#feedList:empty::before { color: var(--svh-sub); font: italic 400 13px/1.3 "Alegreya", serif; }
#feedList > div {
  border-bottom: 1px solid rgba(231, 181, 83, .18); color: var(--svh-cream);
  font: 400 13px/1.32 "Alegreya", serif; font-variant-numeric: lining-nums tabular-nums;
}
#feedList > div:nth-child(even) { background: rgba(255, 255, 255, .03); }
#feedList b { color: var(--sv-foam, #e9f3f2); }
#feedList .fi { color: var(--sv-gold-400, #e7b553); filter: drop-shadow(0 1px 0 #15100c); }
#feedList .fi.coin { color: var(--sv-gold-300, #f6d98a); }
/* a notice to you (hud.toast): a gilt rule on the left and gilt ink, no rubric */
#feedList > div.note { color: var(--sv-gold-300, #f6d98a); font-weight: 600; box-shadow: inset 2px 0 0 0 var(--sv-gold-400, #e7b553); background: linear-gradient(90deg, rgba(231, 181, 83, .1), transparent 70%); }
#feedList > div.note .fi { color: var(--sv-gold-400, #e7b553); }
@keyframes svhOpen { from { transform: scale(.97); } to { transform: none; } }

/* ================= the tooltip ================= */
#tip {
  background: var(--svh-waves) 0 0 / 64px 22px, var(--svh-panel); color: var(--svh-cream); text-shadow: none; border-radius: 5px;
  box-shadow: 0 0 0 1px #15100c, 0 0 0 2.5px var(--sv-gold-500, #c98f2e), 0 0 0 3.5px #15100c, 0 6px 12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(246, 217, 138, .25);
}
#tip b {
  font: 700 13px/1.15 "Cinzel", serif; letter-spacing: .08em;
  background: var(--svh-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #15100c);
}
#tip b kbd { color: var(--sv-navy-900, #071a26); background: var(--svh-gold-text); -webkit-background-clip: border-box; background-clip: border-box; box-shadow: 0 0 0 1px #15100c; }
#tip span { color: var(--svh-sub); font: italic 400 13px/1.25 "Alegreya", serif; }
#tip::after { border-top-color: var(--sv-gold-500, #c98f2e); }

/* ================= the bar: navy lacquer instead of wood, the brass rail and rope kept ================= */
.bar-strip {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 10%, transparent 90%, rgba(0, 0, 0, .5)),
    linear-gradient(180deg, rgba(63, 147, 168, .16), transparent 30%),
    var(--svh-waves) 0 12px / 64px 22px,
    linear-gradient(180deg, var(--sv-navy-700, #12344a) 0%, var(--sv-navy-800, #0b2536) 45%, var(--sv-navy-900, #071a26) 100%);
}
.bar-binnacle {
  background: radial-gradient(ellipse 40% 60% at 50% 100%, rgba(0, 0, 0, .4), transparent), radial-gradient(ellipse 60% 50% at 50% 0%, rgba(63, 147, 168, .18), transparent 70%), linear-gradient(180deg, #0e2c40, var(--sv-navy-900, #071a26));
  box-shadow: 0 -3px 0 -1px #15100c, 0 -4px 0 var(--sv-gold-400, #e7b553), 0 -6px 0 var(--sv-bronze-800, #4a2f12), 0 -10px 18px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(246, 217, 138, .08);
}
.bar-binnacle::before { border-top-color: rgba(231, 181, 83, .5); }

/* the plates on the bar: your ship (left) and the ships at sea / payout (right) */
#bar .plate {
  color: var(--svh-cream); border-radius: 6px;
  background: var(--svh-waves) 0 0 / 64px 22px, var(--svh-panel);
  box-shadow: var(--svh-frame-sm);
}
#shipPlate .wframe { box-shadow: 0 0 0 1px #15100c, 0 0 0 2px var(--sv-gold-500, #c98f2e); background: var(--sv-navy-900, #071a26); border-radius: 3px; }
#shipPlate .wname {
  font: 700 calc(var(--bar-h) * .19)/1.1 "Cinzel", serif; letter-spacing: .05em; text-transform: uppercase;
  background: var(--svh-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #15100c) drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
#shipPlate .wname::first-letter { color: inherit; }
#shipPlate #wClass { color: var(--svh-sub); font: italic 400 13px/1.2 "Alegreya", serif; }
#shipPlate .wkills { color: var(--svh-cream); font-family: "Alegreya", serif; }
#shipPlate .wkills svg { color: var(--sv-gold-400, #e7b553); }
#shipPlate .wkills b { color: var(--sv-gold-300, #f6d98a); }
#shipPlate .wnone svg { color: var(--sv-teal-400, #3f93a8); }
#shipPlate .wnone b {
  font: 700 calc(var(--bar-h) * .17)/1.15 "Cinzel", serif; letter-spacing: .06em; text-transform: uppercase;
  background: var(--svh-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #15100c);
}
#shipPlate .wnone i { color: var(--svh-sub); font: italic 400 13px/1.25 "Alegreya", serif; }
/* the ships-at-sea plaque */
#hint .sw { color: var(--sv-gold-400, #e7b553); }
#hint .n {
  font: 700 calc(var(--bar-h) * .26)/1 "Cinzel", serif; font-variant-numeric: lining-nums tabular-nums;
  background: var(--svh-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #15100c);
}
#hint .l { font-family: "Cinzel", serif; color: var(--svh-sub); letter-spacing: .08em; }
#hint .hsub { color: var(--svh-cream); font-family: "Alegreya", serif; }
#hint .hsub b { color: var(--sv-gold-300, #f6d98a); }
#payPlate {
  color: var(--sv-gold-300, #f6d98a); font-family: "Alegreya", serif; border-radius: 3px;
  background: var(--sv-navy-700, #12344a); box-shadow: inset 0 0 0 1px var(--sv-gold-500, #c98f2e);
  transition: background .12s, box-shadow .12s;
}
#payPlate b { color: var(--sv-foam, #e9f3f2); }
#payPlate:hover:not(:disabled), #payPlate[aria-expanded=true] { background: var(--sv-teal-600, #1d5e73); box-shadow: inset 0 0 0 1px var(--sv-gold-300, #f6d98a), 0 0 8px rgba(246, 217, 138, .35); }
#payPlate:active:not(:disabled) { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--sv-gold-500, #c98f2e); }
/* the docking payout sheet over the plaque */
#extractPreview.xsheet {
  color: var(--svh-cream); border-radius: 6px; padding: 10px 14px 10px;
  background: var(--svh-corners), var(--svh-waves) 0 0 / 64px 22px, var(--svh-panel); box-shadow: var(--svh-frame-sm);
  animation: svhOpen .16s ease-out;
}
#extractPreview.xsheet .k {
  font: 700 12px/1.2 "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding-bottom: 12px; margin-bottom: 4px;
  color: var(--sv-gold-300, #f6d98a); background: var(--svh-divider);
}
#extractPreview .tx-line { color: var(--svh-cream); font-family: "Alegreya", serif; border-bottom: 1px solid rgba(231, 181, 83, .14); padding: 1px 0; }
#extractPreview .tx-line .dots { border-bottom-color: rgba(231, 181, 83, .3); }
#extractPreview .tx-line .val { color: var(--sv-gold-300, #f6d98a); }

/* the status ribbon over the compass: a navy ribbon edged in gold */
#statusRibbon::before {
  background:
    linear-gradient(var(--sv-gold-400, #e7b553), var(--sv-gold-400, #e7b553)) top / 100% 1.5px no-repeat,
    linear-gradient(var(--sv-gold-400, #e7b553), var(--sv-gold-400, #e7b553)) bottom / 100% 1.5px no-repeat,
    var(--svh-waves) 0 0 / 64px 22px,
    linear-gradient(180deg, var(--sv-navy-700, #12344a), var(--sv-navy-900, #071a26));
  box-shadow: none;
}
#ownerStatus { color: var(--svh-cream); font: italic 500 max(14px, calc(var(--cmp) * .088))/1.2 "Alegreya", serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
#statusRibbon .bar.gauge { background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(231, 181, 83, .35); }
#statusRibbon .bar.gauge > div { background: var(--svh-gold-text); }
#statusRibbon .bar.gauge[data-kind=dock] > div { background: linear-gradient(180deg, #7cc3d3, var(--sv-teal-600, #1d5e73)); }

/* the orders: the wax seals become navy enamel medallions on their brass discs */
button.mode { --wax: #2a5d78; --wax-ink: var(--sv-navy-800, #0b2536); --wax-cur: var(--sv-navy-800, #0b2536); font-family: "Cinzel", serif; }
button.mode.fight { --wax: #9c3b24; }
button.mode.mine { --wax: var(--sv-teal-600, #1d5e73); --wax-ink: var(--sv-navy-800, #0b2536); }
button.mode.extract { --wax: #2f6a93; --wax-ink: var(--sv-navy-800, #0b2536); }
button.mode .seal {
  border-radius: 50%; color: var(--sv-gold-300, #f6d98a);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 42%), radial-gradient(circle, color-mix(in srgb, var(--wax-cur) 85%, #3f93a8) 0 52%, color-mix(in srgb, var(--wax-cur) 60%, #000) 100%);
  box-shadow: inset 0 0 0 1px #15100c, inset 0 0 0 2.5px rgba(231, 181, 83, .75), inset 0 0 0 3.5px rgba(21, 16, 12, .6), inset 0 3px 6px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .55);
}
button.mode .seal::before { content: none; }
button.mode .seal::after { inset: 20%; border: 1px solid rgba(246, 217, 138, .28); box-shadow: none; }
button.mode .seal svg { filter: drop-shadow(0 1px 0 #15100c); }
button.mode .lbl { background: var(--svh-gold-text); color: var(--sv-navy-800, #0b2536); text-shadow: 0 1px 0 rgba(255, 245, 210, .45); font-family: "Cinzel", serif; letter-spacing: .06em; }
@media (hover: hover) { button.mode:hover:not(:disabled) .lbl { background: linear-gradient(180deg, #fff3c6, #f6d98a 40%, #e7b553); color: var(--sv-navy-900, #071a26); } }
button.mode.active .seal { --wax-cur: var(--wax); transform: scale(1.06); color: var(--sv-foam, #e9f3f2); }
button.mode.active .lbl { background: linear-gradient(180deg, #fff6d6, #f6d98a 40%, #c98f2e); color: var(--sv-navy-900, #071a26); }
button.mode.active .disc { box-shadow: 0 0 0 1px #15100c, 0 0 0 3px var(--sv-gold-300, #f6d98a), 0 0 14px 3px color-mix(in srgb, var(--wax) 55%, #f6d98a), inset 0 0 0 2px rgba(255, 240, 200, .5), 0 3px 6px rgba(0, 0, 0, .6); }
button.mode kbd { color: var(--sv-gold-300, #f6d98a); background: var(--sv-navy-900, #071a26); box-shadow: 0 0 0 1px var(--sv-gold-500, #c98f2e); font-family: "Alegreya", serif; }
@keyframes stamp { 0% { transform: translateY(-7px) scale(1.3); filter: brightness(1.25); } 45% { transform: translateY(1px) scale(.9); } 70% { transform: scale(1.1); } 100% { transform: scale(1.06); } }

/* the compass readouts: the speed and wind tags in navy and gilt (the brass cartouche and the bezel are kept) */
.cmp-head { font-family: "Cinzel", serif; }
.cmp-tag {
  background: var(--svh-panel); color: var(--svh-sub); font-family: "Cinzel", serif; letter-spacing: .08em; border-radius: 4px;
  box-shadow: 0 0 0 1px #15100c, 0 0 0 2.5px var(--sv-gold-500, #c98f2e), 0 0 0 3.5px #15100c, 0 3px 5px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(246, 217, 138, .22);
}
.cmp-tag b { color: var(--svh-cream); font-family: "Alegreya", serif; }
.cmp-tag.wind svg { color: var(--sv-teal-400, #3f93a8); }
#compass.idle .cmp-tag.speed b { color: var(--svh-sub); }

/* the charts' roundels: brass kept, their word in gilt Cinzel */
#barMenu button { color: var(--sv-gold-300, #f6d98a); font-family: "Cinzel", serif; letter-spacing: .06em; text-shadow: 0 1px 0 #15100c, 0 0 5px rgba(0, 0, 0, .85); }
#barMenu .rd { color: var(--sv-navy-800, #0b2536); }
#barMenu .rd .dot, #barMenu .rd i.dot { background: var(--sv-gold-300, #f6d98a); box-shadow: 0 0 0 1.5px #15100c, 0 0 6px rgba(246, 217, 138, .8); }
@media (hover: hover) { #barMenu button:hover:not(:disabled) .t { color: var(--sv-foam, #e9f3f2); } }

/* the orbs: the figures in Cinzel (no blackletter); the bowls and the brass frames are kept */
.orb-val b { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .02em; }
.orb-val small { font-family: "Cinzel", serif; letter-spacing: .08em; }

/* ================= the account strip (top right, same place) ================= */
#acct {
  color: var(--svh-cream); border-radius: 6px; padding: 8px 14px 8px;
  background: var(--svh-corners), var(--svh-waves) 0 0 / 64px 22px, var(--svh-panel);
  box-shadow: var(--svh-frame-sm);
  --seal: var(--sv-teal-400, #3f93a8); --seal-hi: #7cc3d3; --seal-lo: var(--sv-navy-800, #0b2536);
  --ink: var(--sv-cream, #f3e6c8); --ink-soft: #9fc6cf; --ink-faint: rgba(159, 198, 207, .6); --rule: rgba(231, 181, 83, .22);
}
#acct[data-seal=red] { --seal: var(--sv-rust, #b4472a); --seal-hi: #e07a5a; --seal-lo: #4a1a0e; }
#acct[data-seal=gold] { --seal: var(--sv-gold-400, #e7b553); --seal-hi: var(--sv-gold-300, #f6d98a); --seal-lo: var(--sv-bronze-800, #4a2f12); }
#acct[data-seal=blue] { --seal: var(--sv-teal-400, #3f93a8); --seal-hi: #8fd2e0; --seal-lo: var(--sv-navy-800, #0b2536); }
#acct::-webkit-scrollbar-thumb { background: rgba(231, 181, 83, .45); }
/* the seal: a round gilt-ringed enamel coin, its ring in the state's colour */
#acct .acct-seal, #acct[data-state] .acct-seal {
  border-radius: 50%; color: var(--seal-hi);
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .18), transparent 45%), radial-gradient(circle, var(--sv-navy-700, #12344a), var(--sv-navy-900, #071a26));
  box-shadow: 0 0 0 1px #15100c, 0 0 0 2.5px var(--sv-gold-500, #c98f2e), 0 0 0 3.5px #15100c, inset 0 0 0 2px var(--seal), 0 2px 4px rgba(0, 0, 0, .5);
}
#acct[data-err] .acct-seal { box-shadow: 0 0 0 1px #15100c, 0 0 0 2.5px var(--sv-rust, #b4472a), 0 0 0 3.5px #15100c, inset 0 0 0 2px var(--sv-rust, #b4472a); }
#acct .acct-title { color: var(--svh-cream); font-family: "Alegreya", serif; }
#acct .acct-title .wi { color: var(--sv-gold-400, #e7b553); }
#acct .acct-sub { color: var(--svh-sub); font-family: "Alegreya", serif; }
#acct[data-err] .acct-sub { color: #e8907a; }
#acct .acct-badge { font-family: "Cinzel", serif; color: var(--sv-gold-300, #f6d98a); border-color: rgba(231, 181, 83, .6); background: rgba(7, 26, 38, .6); }
#acct .acct-badge[data-net=devnet], #acct .acct-badge[data-net=testnet], #acct .acct-badge[data-net=localnet] { color: #8fd2e0; border-color: rgba(143, 210, 224, .6); }
#acct .acct-fold svg, #acct button.icon, #acct a.icon { color: var(--sv-gold-400, #e7b553); }
#acct .lg-row { border-bottom: 1px solid rgba(231, 181, 83, .18); color: var(--svh-cream); font-family: "Alegreya", serif; }
#acct .lg-row .k, #acct .lg-sign .k { font: 700 11px/1.3 "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-gold-400, #e7b553); }
#acct .lg-row .num, #acct .lg-row b { color: var(--sv-foam, #e9f3f2); }
#acct .lg-row .s, #acct .muted, #acct #lgNote { color: var(--svh-sub); }
#acct .symb { color: var(--sv-gold-300, #f6d98a); }
#acct .lg-sign pre { background: rgba(7, 26, 38, .7); color: var(--svh-cream); border: 1px solid rgba(231, 181, 83, .3); border-radius: 3px; }
#acct .lg-confirm { border-top: 1px solid rgba(231, 181, 83, .22); color: var(--svh-cream); }
#acct a.btn-link.plain { color: var(--sv-gold-300, #f6d98a); }
#acct #status, #status { color: var(--sv-gold-300, #f6d98a); font-family: "Cinzel", serif; letter-spacing: .08em; border-top-color: rgba(231, 181, 83, .22); }
#acct #status.err, #status.err { color: #e8907a; }

/* ================= the name plates in the world (.wlabel, labels.js; CSS only) ================= */
.wlabel {
  color: var(--svh-cream); background: linear-gradient(180deg, rgba(18, 52, 74, .94), rgba(7, 26, 38, .94));
  border-color: var(--sv-gold-500, #c98f2e);
  box-shadow: 0 0 0 1px #15100c, 0 1px 3px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(246, 217, 138, .22);
}
.wlabel .name { color: var(--svh-cream); font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .03em; }
.wlabel .tag { font-family: "Cinzel", serif; color: var(--svh-sub); border-color: rgba(159, 198, 207, .45); }
.wlabel .bounty { color: var(--sv-gold-300, #f6d98a); font-family: "Alegreya", serif; }
.wlabel .cls { font-family: "Cinzel", serif; color: var(--svh-sub); }
.wlabel .hp { background: #051018; box-shadow: 0 0 0 1px rgba(231, 181, 83, .35); }
.wlabel.mine { background: var(--svh-gold-text); border-color: #15100c; box-shadow: 0 0 0 1px #15100c, 0 1px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 250, 225, .6); }
.wlabel.mine .name { color: var(--sv-navy-900, #071a26); }
.wlabel.mine .tag, .wlabel.mine .cls { color: var(--sv-navy-700, #12344a); border-color: rgba(11, 37, 54, .45); }
.wlabel.mine .bounty { color: var(--sv-navy-800, #0b2536); }
.wlabel.target { border-color: var(--sv-rust, #b4472a); box-shadow: 0 0 0 1px #15100c, 0 0 6px rgba(180, 71, 42, .6), 0 1px 3px rgba(0, 0, 0, .6); }
.wlabel.target .name { color: #f0a080; }
.wlabel.chip { background: none; border-color: transparent; box-shadow: none; }

/* the Shipwright roundel: navy enamel in a gold ring (no red wax) */
#barMenu #btnPanel .rd { background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .2), transparent 45%), radial-gradient(circle, var(--sv-teal-600, #1d5e73), var(--sv-navy-900, #071a26)); color: var(--sv-gold-300, #f6d98a); box-shadow: 0 0 0 1px #15100c, 0 0 0 3px var(--sv-gold-400, #e7b553), 0 0 0 4px #15100c, 0 3px 6px rgba(0, 0, 0, .6); }
/* the ships-at-sea plaque: Cinzel is wider than the old caps, keep "ships at sea" whole */
#hint .n { font-size: calc(var(--bar-h) * .22); }
#hint .l { font-size: 11px; letter-spacing: .04em; }
#hint .hn { gap: 6px; }

/* ================= the bar as one centred group (owner 2026-10-04) =================
   Left to right: your ship's plate, the HULL orb, the orders (and the knots tag), the COMPASS at the exact centre of the
   screen, the wind tag and the charts' roundels, the BOUNTY orb, the ships-at-sea plaque. The two sides are grid
   columns of 1fr in a max-content grid, so both take the wider side's width and the compass stays centred; the navy
   strip and its brass rail sit inside the group and are sized to it (no longer edge to edge). */
.bar-center {
  left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 100vw;
  padding: 0 calc(var(--edge) + 4px); box-sizing: border-box;
}
.bar-center > .bar-strip {
  left: 0; right: 0; bottom: calc(-1 * (var(--sbm) + var(--cmp) * .04 + 2px)); border-radius: 10px 10px 0 0;
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(231, 181, 83, .35), inset -1px 0 0 rgba(231, 181, 83, .35);
  pointer-events: auto;
}
.bar-center > .bar-strip::before, .bar-center > .bar-strip::after { left: 6px; right: 6px; border-radius: 4px; }
.bar-center > .bar-binnacle { bottom: calc(-1 * (var(--sbm) + var(--cmp) * .04 + 2px)); pointer-events: none; }
#statusRibbon { z-index: 3; }
#compass { z-index: 2; }
.bar-side { position: relative; z-index: 1; display: flex; align-items: flex-end; flex-wrap: nowrap; gap: var(--gap); min-width: 0; }
.bar-side.bar-l { grid-column: 1; justify-self: end; }
.bar-side.bar-r { grid-column: 3; justify-self: start; }
.bar-side > #modeRow, .bar-side > #barMenu { grid-column: auto; justify-self: auto; flex: none; }
/* the orbs and the plates: in the row instead of pinned to the screen edges (their lift kept) */
#bar .bar-side > .orb {
  position: relative; left: auto; right: auto; bottom: auto; flex: none;
  margin: 0 calc(var(--orb) * .15) calc(var(--orb-b) - var(--cmp) * .04 - 2px);
}
#bar .bar-side > .plate {
  position: relative; left: auto; right: auto; bottom: auto; flex: none;
  margin: 0 8px calc((var(--bar-h) - var(--plate-h)) / 2 - 4px - var(--cmp) * .04);
}
.bar-l > #modeRow { margin-left: 2px; }
.bar-r > #barMenu { margin-right: 2px; }
/* the ship's log above the left end of the bar, the payout sheet above its right end */
#feed { left: calc(var(--sl) + var(--edge) + 6px); width: max(230px, calc(var(--plate-w) + 24px)); }
#extractPreview.xsheet { right: calc(var(--sr) + var(--edge) + 6px); }
/* phones and tablets: the ships at sea a small chip right of the bounty orb, in the row (not over the orb) */
html.lay-phone #bar .bar-side > #hint.plate, html.lay-tablet #bar .bar-side > #hint.plate {
  right: auto; bottom: auto; align-self: flex-end; margin: 0 2px calc((var(--bar-h) - var(--cmp) * .04) / 2 - 14px);
}
/* the phone's status line: over the roundels, from the compass to the bounty orb */
html.lay-phone #statusRibbon { right: calc(var(--orb) * 1.3 + 70px); width: auto; }
:root { --plate-w: 250px; --rplate-w: 214px; }
@media (max-width: 1700px), (max-height: 960px) { :root { --plate-w: 196px; --rplate-w: 164px; } }
@media (max-width: 1460px), (max-height: 800px) { :root { --plate-w: 172px; --rplate-w: 140px; } }
@media (max-width: 1400px) { :root { --plate-w: 150px; --rplate-w: 150px; } }
@media (max-width: 1300px) { :root { --plate-w: 0px; } }
@media (max-width: 820px) { :root { --rplate-w: 0px; } }
html.lay-tablet, html.lay-phone { --plate-w: 0px; --rplate-w: 0px; }

/* ================= the crest (top left): 1.6x, and the emblem while sailing too ================= */
#crest { width: calc(var(--crest-w) * 1.6); }
html[data-sec=warriorSection] #crest { width: calc(var(--crest-w) * .52 * 1.6); }
#crest .logo { image-rendering: auto; }

/* ================= the account strip (top right, same place): 30 % bigger, all of it ================= */
html:not(.lay-phone) #acct {
  zoom: 1.3;
  top: calc((var(--st) + 10px) / 1.3); right: calc((var(--sr) + 66px) / 1.3);
  width: min(360px, calc((100vw - var(--crest-w) * 1.6 - 110px) / 1.3));
  max-height: calc((100vh - var(--st) - var(--orb) * 1.3 - 50px) / 1.3);
}