/* The one site navigation (site-nav.mjs): the same square, bevelled dark buttons, icons, labels and order on every page.
   Self-contained (Star Captain does not load ui-panels.css). The trim follows the page's --uw-trim (the faction colour
   on the Command Deck), else the game accent.
     always         the utility cluster: Sound, the Field manual and the ⚙ menu, three icon buttons (owner, 3 Oct 2026)
     room to spare  places and Player profile with labels
     less room      site-nav.mjs fits the bar: the tools become icons, then the places (names stay in tooltips and for
                    screen readers; the War chest keeps its balance); a bar that still has no room wraps
     <=760 px       one Menu icon opens the places, profile and War chest as a list; the cluster stays beside it
                    (no sideways scroll on phones)
     a card battle  the compact header: icons only, shorter buttons */
@font-face{font-family:Rajdhani;src:url('/v/a0ee930253a5/fonts/Rajdhani-Bold.ttf') format('truetype');font-weight:100 900;font-display:swap}

nav.site-nav{
 --sn-trim:var(--uw-trim,#6be2ef);--sn-ink:#c8d3dc;--sn-muted:#8d9cab;--sn-h:38px;--sn-cut:7px;
 --sn-font:Rajdhani,Bahnschrift,'DIN Alternate','Segoe UI',sans-serif;
 position:relative;display:flex;align-items:center;flex:0 1 auto;min-width:0;margin:0 0 0 auto;padding:0;
 font:700 13px/1 var(--sn-font);color:var(--sn-ink)
}
nav.site-nav .sn-list{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:nowrap;min-width:0}
nav.site-nav .sn-list>li{display:flex;margin:0;padding:0;flex:none}
nav.site-nav .sn-list>li.sn-tools-start{margin-left:8px}

/* ---- the button: a chamfered metal frame (the .uw-btn recipe, ui-panels.css), drawn inside the shape ---- */
nav.site-nav :is(.sn-item,.sn-toggle){
 position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
 height:var(--sn-h);min-height:0;min-width:var(--sn-h);margin:0;padding:0 13px;
 border:1px solid transparent;border-radius:0;outline:none;box-shadow:none;transform:none;text-shadow:none;
 clip-path:polygon(var(--sn-cut) 0,100% 0,100% calc(100% - var(--sn-cut)),calc(100% - var(--sn-cut)) 100%,0 100%,0 var(--sn-cut));
 background:
  linear-gradient(135deg,#0000 calc(var(--sn-cut)*.7071),var(--sn-edge,#7d8794) 0 calc(var(--sn-cut)*.7071 + 1.5px),#0000 0) border-box 0 0/calc(var(--sn-cut)*2) calc(var(--sn-cut)*2) no-repeat,
  linear-gradient(315deg,#0000 calc(var(--sn-cut)*.7071),var(--sn-edge,#7d8794) 0 calc(var(--sn-cut)*.7071 + 1.5px),#0000 0) border-box 100% 100%/calc(var(--sn-cut)*2) calc(var(--sn-cut)*2) no-repeat,
  linear-gradient(180deg,#ffffff12,#0000 55%) padding-box,
  linear-gradient(180deg,#1b2431,#0c1119) padding-box,
  linear-gradient(135deg,#6f7986 0%,#262c34 22%,#454d58 45%,#1a1e25 70%,#5b6470 100%) border-box;
 color:var(--sn-ink);font:700 13px/1 var(--sn-font);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
 cursor:pointer;transition:color .15s,filter .2s
}
nav.site-nav :is(a.sn-item,button.sn-item,.sn-toggle):is(:hover,:focus-visible),nav.site-nav .sn-toggle[aria-expanded=true]{
 --sn-edge:var(--sn-trim);color:#fff;
 background:
  linear-gradient(135deg,#0000 calc(var(--sn-cut)*.7071),var(--sn-trim) 0 calc(var(--sn-cut)*.7071 + 1.5px),#0000 0) border-box 0 0/calc(var(--sn-cut)*2) calc(var(--sn-cut)*2) no-repeat,
  linear-gradient(315deg,#0000 calc(var(--sn-cut)*.7071),var(--sn-trim) 0 calc(var(--sn-cut)*.7071 + 1.5px),#0000 0) border-box 100% 100%/calc(var(--sn-cut)*2) calc(var(--sn-cut)*2) no-repeat,
  linear-gradient(180deg,color-mix(in srgb,var(--sn-trim) 22%,transparent),#0000 70%) padding-box,
  linear-gradient(180deg,#1f2a38,#0e141d) padding-box,
  linear-gradient(135deg,color-mix(in srgb,var(--sn-trim) 85%,#fff),color-mix(in srgb,var(--sn-trim) 40%,#1b2027) 50%,color-mix(in srgb,var(--sn-trim) 85%,#fff)) border-box;
 text-shadow:0 0 10px color-mix(in srgb,var(--sn-trim) 55%,transparent)
}
/* Focus: a bright inset double ring (clip-path hides outlines). */
nav.site-nav :is(.sn-item,.sn-toggle):focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #000c}
/* The page you are on: lit, not a link. */
nav.site-nav .sn-item[aria-current=page]{
 --sn-edge:var(--sn-trim);color:#fff;cursor:default;
 background:
  linear-gradient(0deg,var(--sn-trim) 0 2px,#0000 0) padding-box,
  linear-gradient(180deg,color-mix(in srgb,var(--sn-trim) 30%,transparent),color-mix(in srgb,var(--sn-trim) 8%,transparent)) padding-box,
  linear-gradient(180deg,#1f2a38,#0e141d) padding-box,
  linear-gradient(135deg,color-mix(in srgb,var(--sn-trim) 85%,#fff),color-mix(in srgb,var(--sn-trim) 40%,#1b2027) 50%,color-mix(in srgb,var(--sn-trim) 85%,#fff)) border-box;
 text-shadow:0 0 10px color-mix(in srgb,var(--sn-trim) 55%,transparent)
}

/* ---- icons: the places in the trim colour, the tools in ink ---- */
nav.site-nav .sn-icon{flex:none;width:16px;height:16px;fill:currentColor;display:block}
nav.site-nav .sn-place .sn-icon{color:var(--sn-trim);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sn-trim) 55%,transparent))}
nav.site-nav .sn-place.sn-map .sn-icon{width:12px;height:12px}
nav.site-nav .sn-sound .sn-off,nav.site-nav .sn-sound[aria-pressed=false] .sn-on{display:none}
nav.site-nav .sn-sound[aria-pressed=false] .sn-off{display:inline}
nav.site-nav .sn-sound[aria-pressed=false]{color:var(--sn-muted)}
nav.site-nav .sn-toggle .sn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- the utility cluster (owner, 3 Oct 2026: "consolidate and standardize"): Sound, the Field manual and the ⚙ menu,
   three square icon buttons in the same frame on every page and every width (phones too); names in tooltips and for
   screen readers ---- */
nav.site-nav .sn-util{display:flex;align-items:center;gap:6px;flex:none;margin-left:14px}
nav.site-nav .sn-util-btn{padding:0;width:var(--sn-h)}
nav.site-nav .sn-util-btn .sn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
nav.site-nav .sn-more[aria-expanded=true]{--sn-edge:var(--sn-trim);color:#fff;
 background:
  linear-gradient(135deg,#0000 calc(var(--sn-cut)*.7071),var(--sn-trim) 0 calc(var(--sn-cut)*.7071 + 1.5px),#0000 0) border-box 0 0/calc(var(--sn-cut)*2) calc(var(--sn-cut)*2) no-repeat,
  linear-gradient(315deg,#0000 calc(var(--sn-cut)*.7071),var(--sn-trim) 0 calc(var(--sn-cut)*.7071 + 1.5px),#0000 0) border-box 100% 100%/calc(var(--sn-cut)*2) calc(var(--sn-cut)*2) no-repeat,
  linear-gradient(180deg,color-mix(in srgb,var(--sn-trim) 22%,transparent),#0000 70%) padding-box,
  linear-gradient(180deg,#1f2a38,#0e141d) padding-box,
  linear-gradient(135deg,color-mix(in srgb,var(--sn-trim) 85%,#fff),color-mix(in srgb,var(--sn-trim) 40%,#1b2027) 50%,color-mix(in srgb,var(--sn-trim) 85%,#fff)) border-box}
/* the ⚙ menu: a chamfered dark panel under the button, inside the screen (site-nav.mjs wireMenu sets its place) */
nav.site-nav .sn-menu{
 position:fixed;z-index:1000;top:var(--sn-mtop,56px);right:var(--sn-mright,8px);left:auto;
 width:max-content;min-width:230px;max-width:calc(100vw - 16px);max-height:calc(100dvh - var(--sn-mtop,56px) - 8px);overflow:auto;
 box-sizing:border-box;margin:0;padding:6px;list-style:none;display:flex;flex-direction:column;gap:2px;
 clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
 background:linear-gradient(180deg,#0e1620fa,#070b11fc);border:1px solid color-mix(in srgb,var(--sn-trim) 45%,#2c3846);box-shadow:0 18px 44px #000d
}
nav.site-nav .sn-menu[hidden]{display:none}
nav.site-nav .sn-menu>li{display:flex;margin:0;padding:0}
nav.site-nav .sn-menu>li.sn-mi-sep{margin-top:4px;padding-top:5px;border-top:1px solid #ffffff17}
nav.site-nav .sn-mi{
 flex:1 1 auto;display:flex;align-items:center;gap:11px;box-sizing:border-box;min-height:40px;margin:0;padding:0 14px 0 12px;
 border:0;border-left:2px solid transparent;border-radius:0;background:none;box-shadow:none;outline:none;
 color:var(--sn-ink);font:700 13px/1 var(--sn-font);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:left;white-space:nowrap;cursor:pointer
}
nav.site-nav .sn-mi .sn-icon{color:var(--sn-trim)}
nav.site-nav .sn-mi:is(:hover,:focus-visible,:focus){color:#fff;border-left-color:var(--sn-trim);background:linear-gradient(90deg,color-mix(in srgb,var(--sn-trim) 22%,transparent),#0000 85%)}
nav.site-nav .sn-mi:focus-visible{box-shadow:inset 0 0 0 2px #fff}
nav.site-nav .sn-mi[aria-current=page]{color:#fff;border-left-color:var(--sn-trim)}

/* ---- the War chest: the shared chip (war-chest-store.mjs mountChestChip; Dominion's own chest button) at nav height ---- */
nav.site-nav .sn-chest{display:flex;align-items:center;margin:0;padding:0;border:0;background:none;box-shadow:none;clip-path:none;min-width:0}
nav.site-nav .sn-chest:before{content:none!important;display:none!important}
nav.site-nav #wallet{margin:0;padding:0;font-size:inherit;color:inherit}   /* (the old page rules for #wallet stay out) */
nav.site-nav .sn-chest>.uw-chest-chip{height:var(--sn-h);min-height:0;box-sizing:border-box;font-family:var(--sn-font)}
nav.site-nav .sn-chest>.dm-chest{height:var(--sn-h);box-sizing:border-box;padding:3px 12px 3px 10px;border:1px solid var(--uw-req,#c04fd0);border-radius:0;
 clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);background:linear-gradient(180deg,#1d0b1a,#0b0610);
 box-shadow:inset 0 0 12px color-mix(in srgb,var(--uw-req,#c04fd0) 25%,transparent);cursor:pointer}

/* ---- the phone menu button: only on narrow screens ---- */
nav.site-nav .sn-toggle{display:none}

/* ---- fitting the bar (site-nav.mjs fit): the most labels that fit beside the page's own controls ----
   data-fit="full"   every label (Settings is the cog alone)
   data-fit="tools"  the tools become icons (their names stay in tooltips and for screen readers); the War chest keeps its balance
   data-fit="icons"  the places become icons too
   When even the icons do not fit beside the page's controls, the bar wraps and the nav takes its own row. */
nav.site-nav:is([data-fit=tools],[data-fit=icons]) .sn-tool .sn-label,
nav.site-nav[data-fit=icons] .sn-place .sn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
nav.site-nav:is([data-fit=tools],[data-fit=icons]) .sn-tool,nav.site-nav[data-fit=icons] .sn-place{padding:0}
nav.site-nav[data-fit=icons] .sn-list{gap:4px}
nav.site-nav[data-fit=icons] .sn-list>li.sn-tools-start{margin-left:4px}
/* the page's bar may wrap so the nav can take its own row (Dominion's bar is one row otherwise) */
.dm-top:has(>nav.site-nav){flex-wrap:wrap;row-gap:6px}

/* ---- the card battle's compact header (Skirmish and the opening hand): icons only, shorter ---- */
body:has(.game-layout,.mulligan) nav.site-nav{--sn-h:32px;--sn-cut:6px}
body:has(.game-layout,.mulligan) nav.site-nav :is(.sn-place,.sn-tool) .sn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body:has(.game-layout,.mulligan) nav.site-nav :is(.sn-place,.sn-tool){padding:0}
body:has(.game-layout,.mulligan) nav.site-nav .sn-list{gap:4px}

/* ---- phones: one Menu button; the items open as a list under it ---- */
@media (max-width:760px){
 /* the Menu button is an icon beside the utility cluster (four squares fit a 375 px bar beside the brand) */
 nav.site-nav .sn-toggle{display:inline-flex;padding:0;width:var(--sn-h)}
 nav.site-nav .sn-util{margin-left:6px}
 nav.site-nav .sn-list{display:none}
 :root nav.site-nav[data-open] .sn-list{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;position:fixed;z-index:999;top:var(--sn-top,60px);right:8px;left:auto;
  width:min(300px,calc(100vw - 16px));max-height:calc(100dvh - var(--sn-top,60px) - 8px);overflow:auto;box-sizing:border-box;padding:10px;
  background:linear-gradient(180deg,#0d141df7,#070b11fa);border:1px solid #2c3846;box-shadow:0 18px 44px #000d
 }
 nav.site-nav[data-open] .sn-list>li{display:flex}
 nav.site-nav[data-open] .sn-list>li.sn-tools-start{margin:6px 0 0;padding-top:8px;border-top:1px solid #ffffff14}
 :root nav.site-nav[data-open] :is(.sn-place,.sn-tool,.sn-settings){flex:1 1 auto;justify-content:flex-start;padding:0 14px;height:42px}
 :root nav.site-nav[data-open] :is(.sn-place,.sn-tool,.sn-settings) .sn-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
 nav.site-nav[data-open] .sn-chest,nav.site-nav[data-open] .sn-chest>*{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){nav.site-nav :is(.sn-item,.sn-toggle){transition:none}}
@media (forced-colors:active){
 nav.site-nav :is(.sn-item,.sn-toggle){clip-path:none;border:1px solid CanvasText;background:Canvas;color:CanvasText;text-shadow:none}
 nav.site-nav .sn-item[aria-current=page]{border-width:2px;color:Highlight}
 nav.site-nav :is(.sn-item,.sn-toggle):focus-visible{outline:2px solid Highlight;outline-offset:2px}
 nav.site-nav[data-open] .sn-list{background:Canvas;border:1px solid CanvasText}
 nav.site-nav .sn-more[aria-expanded=true]{border-width:2px}
 nav.site-nav .sn-menu{clip-path:none;background:Canvas;border:1px solid CanvasText}
 nav.site-nav .sn-mi{color:LinkText;border-left-color:Canvas}
 nav.site-nav .sn-mi:is(:hover,:focus,:focus-visible){background:Highlight;color:HighlightText;border-left-color:HighlightText;outline:2px solid Highlight}
 nav.site-nav .sn-mi .sn-icon{color:inherit}
}

/* The Ultra War mark in each page's top-left brand (brand-mark.mjs HEADER_MARK, approved 3 Oct 2026; it replaced the ◈).
   Its size is in the markup (no shift before this loads); a soft warm glow ties it to the bolt. */
.brand-mark{display:inline-flex;flex:none;align-items:center;line-height:0}
.brand-mark .uw-mark{display:block;width:28px;height:28px;filter:drop-shadow(0 0 6px rgba(255,138,0,.35))}
@media (max-width:700px){.brand-mark .uw-mark{width:24px;height:24px}}
@media (forced-colors:active){.brand-mark .uw-mark{filter:none}}