/* BLACK VECTOR page skin.
 * Loads after Bootstrap 5.3 and bootstra-html32. Adds dark gunmetal "bv-*" colour schemes
 * (one title colour per world), slimmer bevels, the touch pad and the full-screen layout.
 */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
/* ===== BLACK VECTOR: dark gunmetal schemes + slimmer bevels (game-only tweaks to bootstra-html32) ===== */
[data-nv-scheme^="bv"]{--nv-face:#46484c;--nv-face-rgb:70,72,76;--nv-title:#6e1f12;--nv-title-rgb:110,31,18}
[data-nv-scheme="bv-tropics"]{--nv-title:#0e5446;--nv-title-rgb:14,84,70}
[data-nv-scheme="bv-desert"]{--nv-title:#86460f;--nv-title-rgb:134,70,15}
[data-nv-scheme="bv-winter"]{--nv-title:#284a72;--nv-title-rgb:40,74,114}
[data-nv-scheme="bv-rocky"]{--nv-title:#74200f;--nv-title-rgb:116,32,15}
[data-nv-scheme^="bv"]{
 --nv-hi:color-mix(in srgb,var(--nv-face) 58%,#fff);
 --nv-hover:color-mix(in srgb,var(--nv-face) 88%,#fff);
 --nv-well:color-mix(in srgb,var(--nv-face) 84%,#000);
 --nv-lo:color-mix(in srgb,var(--nv-face) 78%,#000);
 --nv-press:color-mix(in srgb,var(--nv-face) 80%,#000);
 --nv-shade:color-mix(in srgb,var(--nv-face) 45%,#000);
 --nv-text:#e2dfd2;--nv-link:#8cc4ff;--nv-visited:#c9a6ff;--nv-amber:#ffc23a;
 --bs-body-color:var(--nv-text);--bs-emphasis-color:#fff;--bs-secondary-color:#a9a79c;--bs-border-color:var(--nv-shade);
 --bs-link-color-rgb:140,196,255;color-scheme:dark;
}
html.bv-bg{background-color:#040509;background-position:center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat;image-rendering:pixelated;min-height:100%}
body{padding:10px;color:var(--nv-text)}
:focus-visible{outline-color:#fff}
html .btn{--bs-btn-border-width:2px;--bs-btn-color:#ece8da;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-color:color-mix(in srgb,var(--nv-face) 55%,#fff)}
html .btn:active,html .btn.active,html .btn.down{padding:calc(var(--bs-btn-padding-y) + 1px) calc(var(--bs-btn-padding-x) - 1px) calc(var(--bs-btn-padding-y) - 1px) calc(var(--bs-btn-padding-x) + 1px);border-style:inset}
html .btn:disabled{text-shadow:1px 1px 0 #000}
html .btn:focus-visible{outline:1px dotted #fff;outline-offset:-5px}
.nv-page{width:1000px;border-width:3px;padding:5px;background:color-mix(in srgb,var(--nv-face) 92%,#000)}
.nv-masthead{border-width:3px;padding:8px}
.nv-masthead .bv-logo{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;image-rendering:pixelated}
.nv-ticker{border-width:2px}
.nv-sidebar{border-width:3px}
.nv-panel{border-width:2px}
.nv-terminal{border-width:2px}
.nv-box-title{border-width:2px}
.nv-help{border-width:2px;background:#2b2a1c;color:#e9e2b0}
.nv-screen-shell{padding:4px;border-width:3px;max-width:100%;margin:0 auto}
.nv-screen{border-width:2px}
.nv-screen>canvas{cursor:crosshair;outline:none}
.form-check-label,label{cursor:pointer}
.bv-opts .form-check{margin-bottom:2px}
.table-terminal td,.table-terminal th{white-space:normal}
.nv-counter>span{font-size:14px}
#bexit{display:none}
body.noscroll{overflow:hidden}
/* touch pad: left thumb D-pad, centre climb/descend/weapon, right thumb stick with FIRE */
#pad{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:4px;padding:6px;background:var(--nv-face);border:2px outset var(--nv-hi);touch-action:none;-webkit-user-select:none;user-select:none}
#pad[hidden]{display:none}
#pad .spacer{display:none}
#pad .bv-dpad{width:auto;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:2px;touch-action:none}
#pad .bv-dpad .btn{--bs-btn-border-width:2px;font-size:15px;pointer-events:none}
#pad .bv-dpad .btn small{font-size:7px;margin-top:1px}
#pad .bv-dpad .btn.down{border-style:inset;background:var(--nv-press)}
#pad .nv-dpad-center{border-width:2px;font-size:8px}
.pcol{display:flex;flex-direction:column;gap:5px;width:78px;flex:none}
.pcol .btn{padding:7px 2px;touch-action:none}
.pcol .btn.down{border-style:inset}
.stick{width:130px;height:130px;flex:none;border-radius:50%;border:2px inset var(--nv-hi);background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,0,0,.18) 7px 8px),var(--nv-well);position:relative;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 11px var(--nv-font-ui);letter-spacing:.5px;background:#a01200;border:3px outset #ff8a70;pointer-events:none;text-shadow:1px 1px 0 #000}
#knob.down{border-style:inset;background:#d01800}
/* full screen: only the game view, scaled up */
#rig.fs{position:fixed;inset:0;z-index:1000;width:auto!important;max-width:none;margin:0;background:#000;border:0;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#rig.fs .nv-screen{border:0;width:min(100vw,calc(100dvh * 4 / 3));max-height:100dvh}
#rig.fs #bexit{display:block;position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);opacity:.75;z-index:2}
#rig.fs #pad{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 6px);margin:0;border:0;background:transparent;pointer-events:none;padding:0 calc(env(safe-area-inset-right,0px) + 8px) 0 calc(env(safe-area-inset-left,0px) + 8px)}
#rig.fs #pad>*{pointer-events:auto;opacity:.72}
#rig.fs #pad .pcol{flex:0 0 74px}
#rig.fs #pad .spacer{display:block;flex:1;pointer-events:none}
@media (max-width:575.98px){body{padding:3px}.nv-page{border-width:2px;padding:3px}.nv-screen-shell{padding:2px;border-width:2px}}

/* single pause button: lives in the bar, moves into the frame in full screen */
#rig.fs #bpause{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:calc(env(safe-area-inset-left,0px) + 8px);opacity:.75;z-index:2;--bs-btn-padding-y:3px;--bs-btn-padding-x:8px;--bs-btn-font-size:10px}
#rig.fs #pad .pcol{width:78px;flex:none}
/* dark tweaks for dialogs and tabs */
.modal{--bs-modal-border-width:3px;--bs-modal-color:var(--nv-text)}
.nav-tabs{border-bottom-width:2px}
.nav-tabs .nav-link,.nav-tabs .nav-link:hover,.nav-tabs .nav-link.active{color:var(--nv-text);border-width:2px}
.nav-tabs .nav-link:not(.active){background:var(--nv-lo)}
.nav-tabs + .tab-content{border-width:2px}
html .btn-close{color:#ece8da}
.form-switch .form-check-input{width:2.4em}