/* Setup modal (language / mouse / graphics / sound / help / privacy). Built on css/ui/kit.css. */
#setupModal{ position:fixed; inset:0; z-index:10; background:rgb(0 0 8 / .6); }
#setupModalBox{ left:528px; top:293px; width:480px; height:380px; }
#smSq{ left:12px; top:12px; width:22px; height:22px; border-radius:10px 3px 3px 9px; }
#setupModalTitle{ left:44px; top:8px; font-family:var(--uiFontLabel); font-size:21px; letter-spacing:.4px; color:var(--uiHdText); }
#setupCloseBtn{ right:12px; top:10px; width:44px; height:26px; border-radius:4px 13px 13px 4px;
  font-family:var(--uiFontLabel); font-size:15px; color:#2a0508; transition:filter .15s; }
#setupCloseBtn:hover{ filter:brightness(1.12); }
#smLine{ left:12px; right:12px; top:44px; }
#smSide{ left:12px; top:54px; width:18px; height:314px; border-radius:0 0 0 12px; }
#setupTabs{ left:40px; top:56px; width:428px; height:30px; }
#setupTabs button{ position:absolute; top:0; height:30px; width:67px; font-family:var(--uiFontLabel); font-weight:500;
  font-size:14px; white-space:nowrap; padding:0; color:#0c1440; border-radius:8px 8px 3px 8px; transition:filter .15s; }
#setupTabs button:nth-child(1){ left:0; } #setupTabs button:nth-child(2){ left:72px; }
#setupTabs button:nth-child(3){ left:144px; } #setupTabs button:nth-child(4){ left:216px; }
#setupTabs button:nth-child(5){ left:288px; } #setupTabs button:nth-child(6){ left:361px; }
#setupTabs button:hover{ filter:brightness(1.12); }
#setupTabs button.active{ border-radius:3px 18px 0 0; }
.setupTabPanel{ left:40px; top:100px; width:428px; height:260px; }
.setupTabPanel > *{ position:absolute; }
#setupLangLabel{ left:0; top:4px; font-size:17px; color:#c7d0ff; }
#setupLangButtons{ left:0; top:36px; width:428px; height:44px; }
#setupLangButtons button{ position:absolute; top:0; width:160px; }
#setupLangButtons button:nth-child(2){ left:170px; }
#setupLangButtons button.active{ border-color:#f5bd5c; box-shadow:0 0 8px rgb(245 189 92 / .45), inset 0 0 8px rgb(245 189 92 / .12); }
/* Scoped to #setupModal: the dev tools menu reuses plain .setupCheckRow. */
#setupModal .setupCheckRow{ position:absolute; left:0; margin:0; display:flex; align-items:center; gap:12px;
  font-family:var(--uiFontBody); font-size:17px; color:#c7d0ff; cursor:pointer; }
#setupModal .setupCheckRow:nth-child(1){ top:4px; }
#setupModal .setupCheckRow:nth-child(2){ top:50px; }
#setupModal .setupCheckRow:nth-child(3){ top:96px; }
/* Mouse tab: the three switches closer together, the sensitivity sliders under them */
#setupTabMouse .setupCheckRow:nth-child(1){ top:0; }
#setupTabMouse .setupCheckRow:nth-child(2){ top:34px; }
#setupTabMouse .setupCheckRow:nth-child(3){ top:68px; }
#mouseSensBox{ left:0; top:106px; width:428px; }
#mouseSensBox .gfxRow{ display:flex; justify-content:space-between; font-size:16px; color:#c7d0ff; }
#mouseSensBox .gfxRow b{ font-family:var(--uiFontLabel); font-weight:500; color:#f8bb56; letter-spacing:.6px; }
#mouseSensBox .gfxSlider{ display:block; width:100%; margin:2px 0 8px; }
#setupModal .setupCheckRow input{ position:absolute; opacity:0; pointer-events:none; }
#setupModal .setupCheckRow .chk{ width:44px; height:24px; border-radius:4px 12px 12px 4px; border:1.5px solid #3c55d8;
  background:#030820; position:relative; transition:border-color .15s; }
#setupModal .setupCheckRow .chk::after{ content:""; position:absolute; left:3px; top:3px; width:15px; height:15px; border-radius:3px;
  background:#2a3c96; transition:left .15s, background .15s; }
#setupModal .setupCheckRow input:checked + .chk{ border-color:#f5bd5c; }
#setupModal .setupCheckRow input:checked + .chk::after{ left:23px; background:linear-gradient(180deg,#ffda92,#f8bb56 55%,#d38b37); }
#setupModal .setupCheckRow input:focus-visible + .chk{ box-shadow:0 0 0 2px #6f86ff; }
/* Sound tab: a switch + its level per row, the slider under it (normal flow) */
#setupTabSound > *{ position:relative; }
#setupTabSound .sndRow{ display:flex; justify-content:space-between; align-items:center; height:30px; }
#setupModal #setupTabSound .setupCheckRow{ position:relative; top:auto; font-size:16px; }
#setupTabSound .sndRow b{ font-family:var(--uiFontLabel); font-weight:500; color:#f8bb56; letter-spacing:.6px; }
#setupTabSound .gfxSlider{ display:block; width:100%; margin:2px 0 14px; transition:opacity .15s; }
#setupTabSound .gfxSlider.muted{ opacity:.4; }
#setupTabSound .sndNote{ font-size:12.5px; line-height:16px; color:#7f8fd6; margin-top:2px; }
/* Graphics tab: the ship lab's two sliders (ship.html), shown inert for now. */
#setupTabGraphics .gfxRow{ left:0; width:428px; display:flex; justify-content:space-between; font-size:16px; color:#c7d0ff; }
#setupTabGraphics .gfxRow b{ font-family:var(--uiFontLabel); font-weight:500; color:#f8bb56; letter-spacing:.6px; }
#setupTabGraphics .gfxTicks{ left:0; width:428px; display:flex; justify-content:space-between;
  font-family:var(--uiFontLabel); font-size:11.5px; letter-spacing:.5px; color:#5f6fb8; }
.gfxSlider{ left:0; width:428px; height:22px; margin:0; -webkit-appearance:none; appearance:none; background:none; cursor:pointer; }
.gfxSlider::-webkit-slider-runnable-track{ height:10px; border-radius:5px; border:1.5px solid #3c55d8;
  background:linear-gradient(90deg,#f8bb56 0,#d38b37 var(--fill),#050d33 var(--fill)); }
.gfxSlider::-moz-range-track{ height:10px; border-radius:5px; border:1.5px solid #3c55d8; background:#050d33; }
.gfxSlider::-moz-range-progress{ height:10px; border-radius:5px; background:linear-gradient(90deg,#f8bb56,#d38b37); }
.gfxSlider::-webkit-slider-thumb{ -webkit-appearance:none; width:30px; height:20px; margin-top:-6.5px; border-radius:4px 10px 10px 4px; border:0;
  background:linear-gradient(180deg,#b8c5ff,#5f77f7 55%,#3a50d2); box-shadow:0 0 6px rgb(95 119 247 / .7), inset 0 1px 1px rgb(255 255 255 / .5); }
.gfxSlider::-moz-range-thumb{ width:30px; height:20px; border-radius:4px 10px 10px 4px; border:0;
  background:linear-gradient(180deg,#b8c5ff,#5f77f7 55%,#3a50d2); box-shadow:0 0 6px rgb(95 119 247 / .7); }
/* Graphics: a scrolling list of sections in normal flow (not the other
   tabs' absolute layout) */
#setupTabGraphics{ overflow-y:auto; overflow-x:hidden; padding-right:10px; box-sizing:border-box; width:438px; }
#setupTabGraphics > *, #setupTabGraphics .gfxSec *{ position:relative; }
#setupTabGraphics .gfxSec{ padding:4px 0 10px; margin-bottom:6px; border-bottom:1px solid #16205a; }
#setupTabGraphics .gfxRow{ width:100%; align-items:center; min-height:26px; }
#setupTabGraphics .gfxSlider{ display:block; width:100%; margin:2px 0 4px; }
#setupTabGraphics .gfxTicks{ width:100%; margin-bottom:2px; }
#setupModal #setupTabGraphics .setupCheckRow{ position:relative; top:auto; font-size:16px; margin:4px 0; }
#setupModal #setupTabGraphics .setupCheckRow .chk::after{ position:absolute; }
#setupTabGraphics .gfxNote{ font-size:12.5px; line-height:16px; color:#7f8fd6; margin-top:2px; }
/* Graphics tab: the modal widens and grows, with the option's description
   on the right (ui/setupModal.js#initGfxHelp). */
#setupModalBox.wide{ left:268px; top:100px; width:1000px; height:824px; }
#setupModalBox.wide #smSide{ height:758px; }
#setupModalBox.wide #setupTabGraphics{ height:704px; }
#gfxHelp{ left:504px; top:100px; width:464px; height:704px; padding:2px 0 0 18px; box-sizing:border-box;
  border-left:1.5px solid #2c4bd8; overflow-y:auto; color:#c7d0ff; font-size:16px; line-height:22px; }
#gfxHelp > div{ position:relative; }
#gfxHelpTitle{ font-family:var(--uiFontLabel); font-size:22px; letter-spacing:.4px; color:#f8bb56; margin-bottom:4px; }
#gfxHelpCost{ font-size:13.5px; margin-bottom:10px; }
#gfxHelpCost.low{ color:#4fe3c6; } #gfxHelpCost.mid{ color:#f8bb56; } #gfxHelpCost.high{ color:#ff6b6e; }
#gfxHelpText{ margin-bottom:12px; }
#gfxHelpValues p{ margin:0 0 10px; }
#gfxHelpValues b{ color:#ffe2a8; font-weight:500; }
#gfxHelpDef{ margin-top:6px; color:#9fb1ff; }
#gfxHelpDef b{ color:#f8bb56; font-weight:500; }
/* group headers, and the [?] badge: how much an option costs (colour) + why (tooltip) */
#setupTabGraphics .gfxHd{ font-family:var(--uiFontLabel); font-size:14px; letter-spacing:1.2px; color:#f8bb56;
  margin:12px 0 2px; padding-bottom:3px; border-bottom:1.5px solid #2c4bd8; }
.gfxCost{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:7px;
  border-radius:50%; border:1.5px solid; font:600 11px/1 var(--uiFontLabel); font-style:normal; vertical-align:1px; cursor:help; }
.gfxCost[data-cost="low"]{ color:#4fe3c6; border-color:#4fe3c6; }
.gfxCost[data-cost="mid"]{ color:#f8bb56; border-color:#f8bb56; }
.gfxCost[data-cost="high"]{ color:#ff6b6e; border-color:#ff6b6e; box-shadow:0 0 5px rgb(255 107 110 / .45); }
#setupTabGraphics .gfxLegend b{ font-weight:600; }
.gfxSeg{ display:flex; gap:3px; }
.gfxSeg button{ font-family:var(--uiFontLabel); font-size:12.5px; letter-spacing:.4px; padding:3px 10px; border-radius:5px;
  border:1.5px solid #3c55d8; background:#050d33; color:#9fb1ff; cursor:pointer; }
.gfxSeg button.on{ border-color:#f5bd5c; color:#ffe2a8; box-shadow:0 0 6px rgb(245 189 92 / .4); }
/* Privacy tab (ui/privacy.js) */
#privacyText{ left:0; top:2px; width:428px; font-size:15px; line-height:21px; color:#c7d0ff; }
#privacyPolicyLink{ left:0; top:96px; font-size:16px; color:#9fb1ff; text-decoration:none; border-bottom:1px solid #3c55d8; }
/* START OVER and Delete my data side by side; one status line under them
   (arming one clears the other's, ui/privacy.js) */
#resetProgressBtn, #deleteDataBtn{ top:132px; height:32px; padding:0 16px; font-size:15px; }
#resetProgressBtn{ left:0; }
#deleteDataBtn{ left:214px; }
#resetProgressBtn.armed, #deleteDataBtn.armed{ border-color:#e04b50; color:#ffb3b5; box-shadow:0 0 8px rgb(224 75 80 / .5); }
#resetProgressStatus, #deleteDataStatus{ left:0; top:174px; width:428px; font-size:14px; line-height:18px; color:#f8bb56; }
#setupHelpText{ left:0; top:4px; width:428px; font-size:17px; line-height:30px; color:#c7d0ff; }
/* Help in the wide window: every mouse and keyboard control, two columns */
#setupModalBox.wide #setupTabHelp{ width:928px; height:704px; overflow-y:auto; }
#setupModalBox.wide #setupHelpText{ position:relative; width:900px; display:flex; gap:40px; font-size:15.5px; line-height:21px; }
#setupHelpText .hCol{ flex:1; }
#setupHelpText h4{ margin:14px 0 6px; font-family:var(--uiFontLabel); font-weight:500; font-size:16px; letter-spacing:1px; color:#f8bb56;
  border-bottom:1.5px solid #2c4bd8; padding-bottom:3px; }
#setupHelpText h4:first-child{ margin-top:0; }
#setupHelpText dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
#setupHelpText dt{ font-family:var(--uiFontLabel); color:#ffe2a8; white-space:nowrap; }
#setupHelpText dd{ margin:0; }
#setupHelpText kbd{ display:inline-block; min-width:18px; padding:0 6px; border:1.5px solid #3c55d8; border-radius:4px;
  background:#050d33; font-family:var(--uiFontLabel); font-size:13.5px; text-align:center; color:#ffe2a8; }