@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Cinzel+Decorative:wght@700&family=Alegreya:ital,wght@0,400;0,700;1,400&display=swap");
/* Sol Voyage interface (owner 2026-10-04): sv-panels - the CONTENTS of the windows (shipwright, Hall of Fame, Live stats,
   How it works, the Sunk and Docked cards, the wallet chooser, the account ledger, the cosign sheet). Loaded after the page
   styles in index.html, so it overrides them. Navy enamel and gilded bronze from the logo: no parchment, no wax, no
   blackletter-and-red-initial headings. Colours come from sv-theme.css (with the same values as fallbacks). */

:root {
  --svp-ink: var(--sv-cream, #f3e6c8);
  --svp-soft: #9fc6cf;
  --svp-line: rgba(231, 181, 83, .18);
  --svp-inset: linear-gradient(180deg, rgba(7, 26, 38, .92), rgba(11, 37, 54, .86));
  --svp-gold: var(--sv-gold-grad, linear-gradient(180deg, #fbe7a6 0%, #e7b553 38%, #b37a2a 62%, #f0cd78 100%));
  --svp-edge: drop-shadow(0 1px 0 #15100c) drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  --svp-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.2 9.8L24 12l-9.8 2.2L12 24l-2.2-9.8L0 12l9.8-2.2z' fill='%23e7b553' stroke='%2315100c' stroke-width='.8'/%3E%3Cpath d='M12 6l1 5 5 1-5 1-1 5-1-5-5-1 5-1z' fill='%23fbe7a6'/%3E%3C/svg%3E");
  --svp-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z' fill='none' stroke='%234a2f12' stroke-width='1.4' opacity='.7'/%3E%3C/svg%3E");
}

/* ---------- shared: the inset cards inside a window ---------- */
#panel .card {
  color: var(--svp-ink); font-family: "Alegreya", Georgia, serif;
  background: var(--svp-inset); border: 1px solid var(--svp-line); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(246, 217, 138, .08), inset 0 0 0 1px rgba(7, 26, 38, .6), 0 1px 0 rgba(0, 0, 0, .35);
}
#panel .card::before, #panel .card::after { background-image: none; }
#panel .muted, #panel .s, #panel .note { color: var(--svp-soft); }
#panel .herald { font: 400 15px/1.45 "Alegreya", Georgia, serif; color: var(--svp-ink); }
#panel .herald b { font: 700 19px/1.2 "Cinzel Decorative", "Cinzel", serif; letter-spacing: .04em; background: var(--svp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--svp-edge); }
#panel .herald b::first-letter { color: inherit; font-size: inherit; }
#panel .welcome-tips { color: var(--svp-ink); font-family: "Alegreya", Georgia, serif; }
#panel .welcome-tips b { font-family: "Cinzel", serif; color: var(--sv-gold-300, #f6d98a); }
#panel .welcome-tips svg, #about .orders .oi { box-shadow: 0 0 0 1px #15100c, 0 0 0 2px var(--sv-gold-500, #c98f2e), 0 2px 3px rgba(0, 0, 0, .5); }
#panel .welcome-go button::before { background: var(--tx-anchor) center / 19px no-repeat, radial-gradient(circle at 36% 30%, #3f93a8, #12344a 60%, #071a26); box-shadow: 0 0 0 1px #15100c, inset 0 0 0 2px var(--sv-gold-500, #c98f2e); border-radius: 50%; }

/* ---------- the shipwright ---------- */
#panel .picker { background: var(--svp-inset); }
#panel .pick-info .hd, #panel .pick-foot .k .lbl { font: 700 11px/1.3 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-teal-400, #3f93a8); }
#panel .pick-info .v.cname {
  font: 700 28px/1.08 "Cinzel Decorative", "Cinzel", serif; letter-spacing: .04em; text-transform: none;
  background: var(--svp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--svp-edge);
}
#panel .pick-info .v.cname::first-letter { color: inherit; font-size: inherit; }
#panel .pick-info .cap { font: italic 400 14.5px/1.3 "Alegreya", Georgia, serif; color: var(--svp-soft); }
#panel .pick-info .cap .flag { box-shadow: 0 0 0 1px #15100c, 0 0 0 2px rgba(231, 181, 83, .6), 0 1px 3px rgba(0, 0, 0, .5); }
#panel .pick-info .guns { font: 400 14px/1.35 "Alegreya", Georgia, serif; color: var(--svp-ink); }
#panel .pick-info .guns svg { color: var(--sv-gold-400, #e7b553); }
#panel .pick-info .theme { color: var(--sv-gold-300, #f6d98a); font-family: "Alegreya", Georgia, serif; }
#panel .pick-foot .k { color: var(--svp-soft); }

/* the 3D preview: a gilded bronze frame round a deep sea-glass window */
#panel .frame, #panel .pick-portrait {
  border-radius: 6px; padding: 5px;
  background: radial-gradient(120% 90% at 50% 0%, #1d5e73 0%, #0b2536 60%, #071a26 100%) content-box, var(--svp-gold) border-box;
  box-shadow: 0 0 0 1px #15100c, inset 0 0 0 1px rgba(255, 240, 190, .55), 0 6px 14px rgba(0, 0, 0, .5);
}
#panel .frame::after, #panel .pick-portrait::after { inset: 5px; border: 1px solid #15100c; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(246, 217, 138, .25), inset 0 0 18px rgba(0, 0, 0, .55); }
#panel .pick-portrait::before { /* four gilt rivets */
  background: radial-gradient(circle at 9px 9px, #fff3c4 0 1.4px, #c98f2e 2.4px, #15100c 3.2px, transparent 3.8px), radial-gradient(circle at calc(100% - 9px) 9px, #fff3c4 0 1.4px, #c98f2e 2.4px, #15100c 3.2px, transparent 3.8px),
    radial-gradient(circle at 9px calc(100% - 9px), #fff3c4 0 1.4px, #c98f2e 2.4px, #15100c 3.2px, transparent 3.8px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #fff3c4 0 1.4px, #c98f2e 2.4px, #15100c 3.2px, transparent 3.8px);
}
/* the type arrows: round bronze coins, not wax */
#panel .cls-arrow {
  background: radial-gradient(circle at 38% 30%, #fbe7a6 0, #e7b553 38%, #8a5a22 100%); border: 1px solid #15100c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 248, 220, .7), inset 0 -2px 3px rgba(74, 47, 18, .55);
}
#panel .cls-arrow svg { stroke: #0b2536; filter: drop-shadow(0 1px 0 rgba(255, 240, 200, .5)); }
#panel .cls-arrow:hover { filter: brightness(1.1) drop-shadow(0 0 6px rgba(246, 217, 138, .55)); }
#panel .pick-count { font-family: "Cinzel", serif; color: var(--sv-gold-300, #f6d98a); background: rgba(7, 26, 38, .78); box-shadow: inset 0 0 0 1px rgba(231, 181, 83, .55), 0 1px 2px rgba(0, 0, 0, .5); border-radius: 3px; }

/* the fleet: navy tiles, the pick wears a gold ring */
#panel .fleet { background: rgba(7, 26, 38, .55); border: 1px solid var(--svp-line); border-radius: 6px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .45); }
#panel .fleet button {
  background: linear-gradient(180deg, #12344a, #0b2536); border: 1px solid rgba(231, 181, 83, .22); border-radius: 4px; color: var(--svp-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45); transition: border-color .12s, box-shadow .12s, background .12s;
}
#panel .fleet button:hover { border-color: rgba(246, 217, 138, .6); background: linear-gradient(180deg, #1d5e73, #12344a); filter: none; }
#panel .fleet button.sel { border-color: #e7b553; box-shadow: 0 0 0 1px #15100c, 0 0 0 2px #e7b553, 0 0 10px rgba(231, 181, 83, .35); }
#panel .fleet .ft-pic { background: radial-gradient(120% 90% at 50% 0%, #1d5e73, #071a26); border-radius: 3px 3px 0 0; }
#panel .fleet .ft-sil { color: rgba(159, 198, 207, .35); }
#panel .fleet .ft-name { font: 700 11px/1.15 "Cinzel", serif; letter-spacing: .03em; color: var(--svp-ink); }
#panel .fleet .ft-nat { font: italic 400 12px/1.2 "Alegreya", Georgia, serif; color: var(--svp-soft); }
#panel .fleet button.sel .ft-name { color: var(--sv-gold-300, #f6d98a); }
html.wright-wide #panel #fleet::before { font-family: "Cinzel", serif; letter-spacing: .14em; color: var(--sv-gold-400, #e7b553); }
html.wright-wide #panel #fleet .ft-pic { border-radius: 3px; }

/* the colour swatches: round gilded chips (the colour inside a thin gold bezel) */
#panel .swatches .swatch {
  border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, .4), inset 0 2px 2px rgba(255, 255, 255, .28), 0 0 0 1px #15100c, 0 0 0 3px #c98f2e, 0 0 0 4px #15100c, 0 2px 4px rgba(0, 0, 0, .5);
  transition: transform .12s, box-shadow .12s;
}
#panel .swatches .swatch.sel { transform: scale(1.12); box-shadow: inset 0 -3px 4px rgba(0, 0, 0, .4), inset 0 2px 2px rgba(255, 255, 255, .3), 0 0 0 1px #15100c, 0 0 0 3px #f6d98a, 0 0 0 4px #15100c, 0 0 10px 3px rgba(246, 217, 138, .55); }
#panel .swatches .swatch::before { background: #0b2536; color: var(--sv-gold-300, #f6d98a); border: 1px solid #c98f2e; border-radius: 4px; font: 700 11px/1.3 "Cinzel", serif; letter-spacing: .05em; box-shadow: 0 3px 8px rgba(0, 0, 0, .55); }
html:not(.lay-phone) #panel .swatches { gap: 0 4px; }

/* the colour themes as small flags on gilded staffs (hud.js flagSwatchSvg): the cloth waves on hover / focus, the
   chosen one rises inside a gold-ruled navy frame */
html #panel .swatches .swatch.flag-sw {
  width: 100%; max-width: 30px; height: auto; aspect-ratio: 44 / 32; padding: 1px; border-radius: 4px; background: transparent;
  box-shadow: none; overflow: visible; transition: transform .14s, box-shadow .14s, background-color .14s;
}
html #panel .swatches .swatch.flag-sw::after { display: none; }
html #panel .swatches .swatch.flag-sw svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 1.5px 1.2px rgba(0, 0, 0, .6)); }
html #panel .swatches .swatch.flag-sw .swf-cloth { transform-box: view-box; transform-origin: 4.6px 15px; }
html #panel .swatches .swatch.flag-sw:hover:not(:disabled) { transform: translateY(-1px) scale(1.08); }
html #panel .swatches .swatch.flag-sw:hover .swf-cloth, html #panel .swatches .swatch.flag-sw:focus-visible .swf-cloth { animation: swf-wave 1.3s ease-in-out infinite; }
html #panel .swatches .swatch.flag-sw:focus-visible { outline: 2px solid var(--sv-gold-300, #f6d98a); outline-offset: 2px; }
html #panel .swatches .swatch.flag-sw.sel {
  transform: translateY(-2px) scale(1.1); background: rgba(11, 37, 54, .85);
  box-shadow: 0 0 0 1px #15100c, 0 0 0 2.5px var(--sv-gold-300, #f6d98a), 0 0 0 3.5px #15100c, 0 0 10px 3px rgba(246, 217, 138, .45);
}
@keyframes swf-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 35% { transform: skewY(-3deg) scaleX(.97); } 70% { transform: skewY(2deg) scaleX(.985); } }
@media (prefers-reduced-motion: reduce) { html #panel .swatches .swatch.flag-sw .swf-cloth { animation: none !important; } }
html.wright-wide #panel #buySection .swatches { grid-template-columns: repeat(8, 38px); gap: 10px 6px; }
html.wright-wide #panel #buySection .swatches .swatch.flag-sw { width: 38px; max-width: none; height: 28px; }
html.lay-phone #panel .swatches .swatch.flag-sw { width: 30px; max-width: none; height: 22px; }

/* the wide shipwright fits the free sea between the top strip and the bar: the type's name shrinks to its column (the
   longest word of the 24 names, 10 letters: Brigantine, Race-built, Geobukseon, fits whole), the preview takes the height
   that is left, and the columns scroll inside the window only on a short screen */
html.wright-wide #panel #buySection .pick-info { container-type: inline-size; min-width: 0; }
html.wright-wide #panel #buySection .pick-info .v.cname { font-size: min(28px, 11.4cqi); line-height: 1.04; overflow-wrap: normal; hyphens: none; text-wrap: balance; }
html.wright-wide #panel #buySection .pick-portrait { aspect-ratio: auto; height: clamp(150px, calc(var(--sv-free) - 420px), 300px); }
html.wright-wide #panel #buySection .pick-foot { margin-top: 4px; }
html.wright-wide[data-card=buySection] #panel .ptitle small { margin-top: 0; }
@media (max-height: 950px) {
  html.wright-wide[data-card=buySection] #panel .ptitle { font-size: 22px; }
  html.wright-wide[data-card=buySection] #panel .ptitle::after { margin: 3px auto 2px; }
  html.wright-wide #panel #buySection .picker { gap: 6px 16px; padding-top: 8px; padding-bottom: 8px; }
  html.wright-wide #panel #buySection .pick-info .cap, html.wright-wide #panel #buySection .pick-info .guns { font-size: 13.5px; line-height: 1.28; }
  html.wright-wide #panel #buySection .buyrow { margin-top: 4px; padding-top: 6px; padding-bottom: 4px; }
}
/* a short screen (1366 x 768): the details column runs the full height on the left, the preview sits over the colours */
@media (max-height: 820px) {
  html.wright-wide #panel #buySection .picker { grid-template-areas: "info pv" "info sw" "info name"; }
  html.wright-wide #panel #buySection .pick-portrait { height: clamp(120px, calc(var(--sv-free) - 330px), 200px); }
  html.wright-wide[data-card=buySection] #panel .ptitle small { display: none; }
}

/* the name field: a navy inset with a gold focus ring */
#panel input[type=text], #panel #nameInput {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid rgba(231, 181, 83, .45); border-radius: 5px;
  background: linear-gradient(180deg, #071a26, #0b2536); color: var(--sv-foam, #e9f3f2);
  font: 400 16px/1.2 "Alegreya", Georgia, serif; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(246, 217, 138, .12);
  transition: border-color .12s, box-shadow .12s;
}
#panel input[type=text]::placeholder { color: rgba(159, 198, 207, .6); font-style: italic; }
#panel input[type=text]:focus { outline: none; border-color: #e7b553; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 0 0 2px rgba(231, 181, 83, .55), 0 0 10px rgba(231, 181, 83, .3); }

/* the buy plate: a gilded bronze plate with the price as a gold coin readout */
#buySection .buyrow::before { background: linear-gradient(180deg, rgba(7, 26, 38, 0), rgba(7, 26, 38, .92) 16px, #071a26); -webkit-mask: none; mask: none; }
#panel #btnBuy, #panel #btnRespawn, #panel #btnAgain, #panel .welcome-go button {
  background: var(--svp-gold); color: #0b2536; border: 0; border-radius: 6px;
  font: 700 15px/1.1 "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 245, 210, .55);
  box-shadow: 0 0 0 1px #15100c, inset 0 1px 0 rgba(255, 250, 225, .85), inset 0 -2px 0 rgba(74, 47, 18, .45), 0 4px 10px rgba(0, 0, 0, .45);
  transition: filter .12s, box-shadow .12s, transform .12s;
}
#panel #btnBuy::after, #panel #btnRespawn::after, #panel #btnAgain::after, #panel .welcome-go button::after { border: 0; box-shadow: inset 0 0 0 3px rgba(74, 47, 18, .0), inset 0 0 0 4px rgba(255, 245, 210, .25); border-radius: 5px; }
#panel #btnBuy:hover:not(:disabled), #panel #btnRespawn:hover, #panel #btnAgain:hover, #panel .welcome-go button:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px #15100c, inset 0 1px 0 rgba(255, 250, 225, .9), inset 0 -2px 0 rgba(74, 47, 18, .45), 0 0 16px rgba(246, 217, 138, .45), 0 4px 10px rgba(0, 0, 0, .45); }
#panel #btnBuy:active:not(:disabled), #panel #btnRespawn:active, #panel #btnAgain:active, #panel .welcome-go button:active { transform: translateY(1px); box-shadow: 0 0 0 1px #15100c, inset 0 2px 5px rgba(74, 47, 18, .6); }
#panel #btnBuy:disabled { filter: grayscale(.6) brightness(.7); }
#panel #btnBuy::before, #panel #btnRespawn::before, #panel #btnAgain::before { /* the gold coin */
  border-radius: 50%; background: var(--svp-star) center / 18px no-repeat, radial-gradient(circle at 36% 30%, #1d5e73 0%, #0b2536 60%, #071a26 100%);
  box-shadow: 0 0 0 1px #15100c, 0 0 0 3px #c98f2e, 0 0 0 4px #15100c, 0 2px 4px rgba(0, 0, 0, .45);
}
#panel #btnBuy .buy-p {
  display: inline-block; align-self: center; padding: 3px 12px 3px 26px; border-radius: 999px; position: relative;
  font: 700 14px/1.15 "Alegreya", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; text-transform: none;
  color: var(--sv-gold-300, #f6d98a); text-shadow: 0 1px 0 #15100c; background: linear-gradient(180deg, #12344a, #071a26);
  box-shadow: 0 0 0 1px #15100c, inset 0 0 0 1px rgba(246, 217, 138, .35);
}
#panel #btnBuy .buy-p::before { content: ""; position: absolute; left: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e7b553 45%, #8a5a22); box-shadow: 0 0 0 1px #15100c; }
#panel .sol-warn { border-left-color: var(--sv-rust, #b4472a); background: rgba(180, 71, 42, .14); color: #f0b9a6; }
#panel #buyAtSea { color: var(--svp-soft); font-style: italic; }

/* ---------- the cosign / commission sheet ---------- */
#panel .txsheet::before { background: var(--svp-star) center / 16px no-repeat, radial-gradient(circle at 36% 30%, #1d5e73, #071a26); border-radius: 50%; box-shadow: 0 0 0 1px #15100c, 0 0 0 2px #c98f2e; }
#panel .txsheet .hd { font: 700 17px/1.2 "Cinzel", serif; letter-spacing: .06em; text-transform: uppercase; background: var(--svp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--svp-edge); }
#panel .txsheet .hd::first-letter { color: inherit; font-size: inherit; }
.tx-line { color: var(--svp-ink); font-family: "Alegreya", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; }
.tx-line .dots { border-bottom: 1px dotted rgba(231, 181, 83, .45); }
.tx-line .val { color: var(--sv-gold-300, #f6d98a); }
.tx-line .sub { color: var(--svp-soft); }
.tx-line.total { border-top: 1px solid rgba(231, 181, 83, .45); box-shadow: 0 -3px 0 -2px rgba(231, 181, 83, .2); }

/* ---------- the Sunk and Docked cards ---------- */
#panel .notice-wrap { transform: none; filter: none; }
#panel .notice, #panel .fallen {
  -webkit-mask: none; mask: none; border-radius: 6px; padding: 18px 16px 18px; text-align: center; color: var(--svp-ink);
  background: radial-gradient(90% 70% at 50% 0%, rgba(63, 147, 168, .22), transparent 65%), linear-gradient(180deg, #12344a, #071a26);
  box-shadow: 0 0 0 1px #15100c, inset 0 0 0 1px rgba(246, 217, 138, .3), inset 0 0 24px rgba(0, 0, 0, .35);
}
#panel .fallen { background: radial-gradient(90% 70% at 50% 0%, rgba(180, 71, 42, .22), transparent 65%), linear-gradient(180deg, #12344a, #071a26); }
#panel .notice .seal-art { display: none; }
#panel .notice .big {
  display: block; font: 700 34px/1.05 "Cinzel Decorative", "Cinzel", serif; letter-spacing: .06em; text-transform: uppercase;
  background: var(--svp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--svp-edge);
}
#panel .notice .big.red { background: linear-gradient(180deg, #ffd2b8 0%, #e07a52 40%, #b4472a 62%, #f0a77e 100%); -webkit-background-clip: text; background-clip: text; }
#panel .notice .big::after { /* the gold divider with a compass star */
  content: ""; display: block; height: 14px; margin: 8px auto 0; width: min(220px, 80%);
  background: var(--svp-star) center / 14px no-repeat, linear-gradient(90deg, transparent, #c98f2e 20%, #f6d98a 50%, #c98f2e 80%, transparent) center / 100% 1px no-repeat;
}
#panel .notice .kicker { margin-top: 6px; font: 700 11.5px/1.3 "Cinzel", serif; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-teal-400, #3f93a8); }
#panel .notice .dframe { width: 230px; margin: 12px auto 4px; }
#panel #deathText, #panel #cashoutText { font: 400 16px/1.45 "Alegreya", Georgia, serif; color: var(--svp-ink); }
#panel #deathText b, #panel #cashoutText b, #panel #deathText .num, #panel #cashoutText .num { color: var(--sv-gold-300, #f6d98a); font-variant-numeric: lining-nums tabular-nums; }
#panel #btnRespawn, #panel #btnAgain { margin-top: 6px; }

/* ---------- the account ledger, the wallet chooser, the signing note ---------- */
.acct-ledger { color: var(--svp-ink); font-family: "Alegreya", Georgia, serif; }
.acct-ledger .k { font: 700 10.5px/1.3 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-gold-400, #e7b553); }
.acct-ledger .lg-row { padding: 6px 2px; border-bottom: 1px solid var(--svp-line); }
.acct-ledger .lg-row:last-child { border-bottom: 0; }
.acct-ledger .num, .acct-ledger .bal b { color: var(--sv-foam, #e9f3f2); font-variant-numeric: lining-nums tabular-nums; }
.acct-ledger .bal b { color: var(--sv-gold-300, #f6d98a); }
.acct-ledger .s, .acct-ledger .muted, #lgNote { color: var(--svp-soft); }
.acct-ledger a.icon, .acct-ledger button.icon { color: var(--sv-gold-400, #e7b553); }
.lg-sign pre {
  color: var(--sv-foam, #e9f3f2); background: #071a26; border: 1px solid var(--svp-line); border-radius: 5px; padding: 8px 10px;
  font: 400 13px/1.4 "Alegreya", Georgia, serif; font-variant-numeric: lining-nums; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}
.lg-wallets button, .lg-wallets button.secondary {
  background: linear-gradient(180deg, #12344a, #0b2536); color: var(--svp-ink); border: 1px solid rgba(231, 181, 83, .4); border-radius: 6px;
  font: 700 13px/1.2 "Cinzel", serif; letter-spacing: .05em; text-transform: none; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(246, 217, 138, .12), 0 1px 2px rgba(0, 0, 0, .45); transition: border-color .12s, box-shadow .12s, background .12s;
}
.lg-wallets button::after { content: none; }
.lg-wallets button:hover { border-color: #e7b553; background: linear-gradient(180deg, #1d5e73, #12344a); box-shadow: 0 0 10px rgba(231, 181, 83, .3); filter: none; }
.lg-wallets button img, .lg-wallets button svg { border-radius: 50%; box-shadow: 0 0 0 1px #15100c, 0 0 0 2px #c98f2e; }
.lg-wallets button svg { color: var(--sv-gold-300, #f6d98a); }
.lg-wallets button.lg-cancel { align-self: center; width: auto; border-color: transparent; background: transparent; color: var(--svp-soft); box-shadow: none; }
.lg-confirm { color: var(--svp-ink); border-top: 1px solid var(--svp-line); }

/* ---------- How it works ---------- */
#about .about-body { color: var(--svp-ink); font-family: "Alegreya", Georgia, serif; }
#about .about-lead, #stats .about-lead, #fame .about-lead { font: italic 400 16px/1.45 "Alegreya", Georgia, serif; color: var(--svp-soft); text-align: center; }
#about .about-body p, #about .about-body li { font: 400 15.5px/1.5 "Alegreya", Georgia, serif; color: var(--svp-ink); }
#about .about-body h3 {
  position: relative; margin: 16px 0 6px; padding: 0 0 5px; font: 700 15px/30px "Cinzel", serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sv-gold-300, #f6d98a); border-bottom: 1px solid var(--svp-line); text-shadow: 0 1px 0 #15100c;
}
#about .about-body h3::first-letter { /* the step number in a gilded medallion */
  float: left; padding: 0 10px; margin: 0 9px 0 0; border-radius: 999px; text-align: center;
  font: 700 15px/30px "Cinzel Decorative", "Cinzel", serif; color: #0b2536; text-shadow: 0 1px 0 rgba(255, 245, 210, .6);
  background: radial-gradient(circle at 35% 28%, #fff1b8, #e7b553 42%, #8a5a22 100%);
  box-shadow: 0 0 0 1px #15100c, inset 0 0 0 2px rgba(255, 245, 210, .4), inset 0 -2px 3px rgba(74, 47, 18, .5);
}
#about .orders b, #panel .welcome-tips b { font-family: "Cinzel", serif; color: var(--sv-gold-300, #f6d98a); letter-spacing: .06em; }
#about .symb, #stats .symb, #panel .symb { color: var(--sv-gold-400, #e7b553); }

/* ---------- Live stats: stat tiles ---------- */
#stats .st-card {
  color: var(--svp-ink); border: 1px solid var(--svp-line); border-radius: 6px; background: var(--svp-inset);
  box-shadow: inset 0 1px 0 rgba(246, 217, 138, .1), inset 0 0 0 1px rgba(7, 26, 38, .6), 0 2px 4px rgba(0, 0, 0, .35);
}
#stats .st-card .k, #stats .st-lvl .l { font: 700 11px/1.3 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-gold-400, #e7b553); }
#stats .st-v { font: 700 24px/1.2 "Alegreya", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; color: var(--sv-foam, #e9f3f2); }
#stats .st-wide .st-v { font-size: 30px; color: var(--sv-gold-300, #f6d98a); text-shadow: 0 1px 0 #15100c, 0 0 14px rgba(231, 181, 83, .25); }
#stats .st-v.st-small { font-size: 16px; }
#stats .st-sub, #stats .st-unit, #stats .st-note, #stats .st-lvl .s, #stats .st-lvl .nm { color: var(--svp-soft); font-family: "Alegreya", Georgia, serif; }
#stats .st-rocks h3 { font: 700 14px/1.3 "Cinzel", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-gold-300, #f6d98a); text-align: center; }
#stats .st-rocks h3::first-letter { color: inherit; font-size: inherit; }
#stats .st-lvl { background: linear-gradient(180deg, #12344a, #0b2536); border: 1px solid var(--svp-line); border-radius: 5px; box-shadow: inset 0 1px 0 rgba(246, 217, 138, .1); }
#stats .st-lvl:nth-child(even) { background: linear-gradient(180deg, #153a51, #0d2a3d); }
#stats .st-lvl .t { color: var(--sv-gold-300, #f6d98a); font-variant-numeric: lining-nums tabular-nums; }
#stats .as-link a { font: 700 13px/1.3 "Cinzel", serif; letter-spacing: .06em; color: var(--sv-gold-400, #e7b553); }

/* ---------- Hall of Fame: the tables ---------- */
#fame .hof-tabs button { background: var(--sv-navy-700, #12344a); color: var(--sv-gold-300, #f6d98a); border: 1px solid rgba(231, 181, 83, .45); font-family: "Cinzel", serif; letter-spacing: .06em; text-shadow: none; }
#fame .hof-tabs button[aria-selected=true] { background: var(--svp-gold); color: #0b2536; border-color: #15100c; }
#fame .hof-board { background: var(--svp-inset); border: 1px solid var(--svp-line); border-radius: 6px; }
#fame .hof-hd { font: 700 14px/1.3 "Cinzel", serif; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--sv-gold-300, #f6d98a); text-shadow: 0 1px 0 #15100c; }
#fame .hof-hd::first-letter, #fame .hof-hd span::first-letter { color: inherit; font-size: inherit; }
#fame .hof-hd::after { content: ""; display: block; height: 12px; margin: 4px auto 0; width: 70%; background: var(--svp-star) center / 11px no-repeat, linear-gradient(90deg, transparent, #c98f2e 25%, #f6d98a 50%, #c98f2e 75%, transparent) center / 100% 1px no-repeat; }
#fame .hof-what { color: var(--svp-soft); font: italic 400 13.5px/1.3 "Alegreya", Georgia, serif; text-align: center; }
#fame .hof-list { margin: 0; padding: 0; }
#fame .hof-row { border-bottom: 1px solid var(--svp-line); background: transparent; color: var(--svp-ink); }
#fame .hof-row:nth-child(even) { background: rgba(255, 255, 255, .03); }
#fame .hof-row:last-child { border-bottom: 0; }
#fame .hof-rank { border-radius: 50%; font-family: "Cinzel", serif; color: var(--svp-soft); box-shadow: inset 0 0 0 1px rgba(231, 181, 83, .35); }
#fame .hof-rank.r1, #fame .hof-rank.r2, #fame .hof-rank.r3 { border-radius: 50%; color: #0b2536; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
#fame .hof-rank.r1 { background: radial-gradient(circle at 35% 28%, #fff1b8, #e7b553 42%, #8a5a22); box-shadow: 0 0 0 1px #15100c, inset 0 0 0 2px rgba(255, 245, 210, .4); }
#fame .hof-rank.r2 { background: radial-gradient(circle at 35% 28%, #ffffff, #c4ccd2 42%, #6b7680); box-shadow: 0 0 0 1px #15100c, inset 0 0 0 2px rgba(255, 255, 255, .4); }
#fame .hof-rank.r3 { background: radial-gradient(circle at 35% 28%, #f6c79a, #b8743a 42%, #5e3412); box-shadow: 0 0 0 1px #15100c, inset 0 0 0 2px rgba(255, 220, 190, .35); }
#fame .hof-face { border-radius: 50%; box-shadow: 0 0 0 1px #15100c, 0 0 0 2px #c98f2e; background-color: #0b2536; }
#fame .hof-name { font: 700 14px/1.2 "Cinzel", serif; letter-spacing: .03em; color: var(--sv-foam, #e9f3f2); }
#fame .hof-meta, #fame .hof-sub, #fame .hof-empty { color: var(--svp-soft); font-family: "Alegreya", Georgia, serif; }
#fame .hof-num { font: 700 16px/1.2 "Alegreya", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; color: var(--sv-gold-300, #f6d98a); }
#fame .hof-row.r1 .hof-num { color: #fbe7a6; text-shadow: 0 0 10px rgba(231, 181, 83, .4); }

/* Cinzel Decorative's swash ligatures (the "OO" of SLOOP) read as a symbol: plain letters everywhere in the windows */
#panel, #about, #stats, #fame, .acct-ledger { font-variant-ligatures: no-common-ligatures no-discretionary-ligatures; font-feature-settings: "liga" 0, "dlig" 0, "clig" 0; }
#panel .pick-info .v.cname { font-size: 26px; }
#fame .hof-hd { display: block; }
#fame .hof-hd::before { content: none; }
#fame .hof-hd::after { transform: none; box-shadow: none; flex: none; }

/* the modal bodies: a navy inset of their own, so the text reads on whatever the window frame is */
#about .about-body, #stats .about-body, #fame .about-body {
  color: var(--svp-ink); border-radius: 6px; padding: 14px 18px 16px;
  background: radial-gradient(110% 70% at 20% 0%, rgba(63, 147, 168, .2), transparent 60%), linear-gradient(180deg, rgba(18, 52, 74, .96), rgba(7, 26, 38, .96));
  box-shadow: inset 0 0 0 1px rgba(246, 217, 138, .22), 0 0 0 1px #15100c;
}
#about .about-title, #stats .about-title, #fame .about-title {
  font: 700 30px/1.15 "Cinzel Decorative", "Cinzel", serif; letter-spacing: .06em; text-align: center; text-transform: none;
  background: var(--svp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--svp-edge);
}
#about .about-title::first-letter, #stats .about-title::first-letter, #fame .about-title::first-letter { color: inherit; font-size: inherit; }
#about .about-title::after, #stats .about-title::after, #fame .about-title::after {
  content: ""; display: block; height: 14px; margin: 6px auto 0; width: min(320px, 70%);
  background: var(--svp-star) center / 14px no-repeat, linear-gradient(90deg, transparent, #c98f2e 20%, #f6d98a 50%, #c98f2e 80%, transparent) center / 100% 1px no-repeat;
}
#about .about-body h3 { color: var(--sv-gold-300, #f6d98a); }
/* the window's own title bar already says Sunk / Docked: the card leads with the kicker over a star divider */
#panel .notice .big { display: none; }
#panel .notice .kicker { margin-top: 0; font-size: 13px; }
#panel .notice .kicker::after {
  content: ""; display: block; height: 14px; margin: 8px auto 0; width: min(220px, 80%);
  background: var(--svp-star) center / 14px no-repeat, linear-gradient(90deg, transparent, #c98f2e 20%, #f6d98a 50%, #c98f2e 80%, transparent) center / 100% 1px no-repeat;
}
#panel .fallen .kicker { color: #e8906a; }
#panel .fleet button, html.wright-wide #panel #fleet button { text-transform: none; letter-spacing: 0; font-family: "Alegreya", Georgia, serif; }
#panel .fleet .ft-name { font-size: 11.5px; line-height: 1.12; text-transform: none; overflow-wrap: anywhere; }
#panel .fleet .ft-nat { text-transform: none; letter-spacing: 0; }
.acct-ledger .lg-sign .k { font: italic 400 14px/1.35 "Alegreya", Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--svp-soft); }
.lg-wallets button, .lg-wallets button.secondary { text-transform: none; letter-spacing: .04em; font-size: 14px; }
.lg-wallets button.lg-cancel { font: italic 400 14px/1.2 "Alegreya", Georgia, serif; letter-spacing: 0; }
#panel .fleet .ft-name, html.wright-wide #panel #fleet .ft-name { font: 700 13px/1.15 "Alegreya", Georgia, serif; letter-spacing: .01em; overflow-wrap: normal; }
#panel .tx-line { font-size: 15px; }
#panel .tx-line .val .s, #panel .tx-line .sub { font-size: 13px; }
#panel .txsheet .muted { font: italic 400 14px/1.35 "Alegreya", Georgia, serif; }