/* Start screen (#banner): top bar + start panel. Built on css/ui/kit.css;
   the top bar's shared left part and end cap are in topBar.css. */
/* Full-viewport overlay; the live 3D scene shows through the shade. */
#banner{
  position:fixed; z-index:9; inset:0;
  background:radial-gradient(60% 60% at 50% 52%, rgb(0 0 0 / .45), rgb(0 0 0 / .85));
}
/* The in-game HUD would otherwise show through the translucent shade. */
body:has(#banner:not(.hidden)) #hud{ visibility:hidden; }

#versionTag{ font-family:var(--uiFontBody); font-size:14px; font-weight:400; color:#93a6ff; margin-left:6px; }
/* The two rails are the stretchy middle of the bar (see .uiBar); everything
   right of them is anchored to the right edge. */
/* in the shared black box (.tbBox): the community links and DEV Blog */
#devBlogBtn{ right:68px; top:24px; width:92px; height:34px; border:1.5px solid #3c55d8; border-radius:6px;
  background:linear-gradient(180deg,#050a24,#00020c); font-family:var(--uiFontLabel); font-size:14px;
  color:#e6ebff; letter-spacing:.3px; text-decoration:none; display:flex; align-items:center; justify-content:center;
  pointer-events:auto; transition:box-shadow .15s, border-color .15s; }
/* Player counters, centered on the stretchy part between the gold and
   right group (the top rail runs from 465px to 434px short of the right
   edge, see #topRail). */
#playerCounts{ left:calc((465px + 100% - 434px) / 2); top:23px; height:36px; transform:translateX(-50%);
  display:flex; align-items:center; gap:18px; padding:0 20px; white-space:nowrap;
  border-radius:18px; background:linear-gradient(180deg,#02030a,#000 60%,#03050f);
  border:1.5px solid #1d36a0; box-shadow:0 0 6px rgb(40 80 255 / .3); }
#playerCounts .pc{ display:flex; align-items:baseline; gap:7px; }
#playerCounts .pcVal{ font-family:var(--uiFontLabel); font-size:21px; font-weight:500; color:#fff; }
#playerCounts .pcLbl{ font-size:15px; color:#c0cbff; }
#playerCounts .pcSep{ width:2px; height:24px; background:linear-gradient(180deg,transparent,#3b4a8a 30%,#3b4a8a 70%,transparent); }
#playerCounts .pcDot{ width:9px; height:9px; border-radius:50%; align-self:center; background:#0bd99a;
  box-shadow:0 0 6px #0bd99a; animation:pcPulse 2s ease-in-out infinite; }
#playerCounts .pcDot.off{ background:#5f6fb8; box-shadow:none; animation:none; }
#playerCounts .pcIcon{ width:20px; height:20px; align-self:center; }
#playerCounts .pcIcon svg{ width:100%; height:100%; }
@keyframes pcPulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.35; } }
#devBlogBtn:hover{ border-color:#6f86ff; box-shadow:0 0 8px rgb(95 119 247 / .5); }
/* Community links left of DEV Blog: GitHub (Discussions), Discord, YouTube */
#communityLinks{ right:168px; top:24px; height:34px; display:flex; gap:8px; pointer-events:auto; }
#communityLinks .commBtn{ width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1.5px solid #3c55d8; border-radius:6px; background:linear-gradient(180deg,#050a24,#00020c); color:#e6ebff;
  transition:box-shadow .15s, border-color .15s; }
#communityLinks .commBtn svg{ width:18px; height:18px; fill:currentColor; }
#communityLinks a.commBtn:hover{ border-color:#6f86ff; box-shadow:0 0 8px rgb(95 119 247 / .5); color:#fff; }
#communityLinks .commBtn:disabled{ cursor:default; color:#5f6fb8; border-color:#26357a; }

/* Set by index.html's <head> script when the saved language isn't the
   HTML's built-in English, cleared by js/ui/i18nApply.js once the panel is
   translated — so a Polish player never sees the English text flash. */
html[data-lang-pending] #box{ visibility:hidden; }
#box{ left:438px; top:267px; width:660px; height:480px; }
#boxSide{ left:10px; top:10px; width:18px; height:340px; border-radius:12px 0 0 0; }
#boxSide2{ left:10px; top:356px; width:18px; height:50px; }
#boxSide3{ left:10px; top:412px; width:18px; height:58px; border-radius:0 0 0 12px; }

#modeRow{ left:36px; top:10px; width:612px; height:34px; }
#modeRow button{ position:absolute; top:0; height:34px; font-family:var(--uiFontLabel); font-weight:500;
  font-size:18px; letter-spacing:.3px; color:#0c1440; transition:filter .15s; }
#modeSingle { left:0;   width:196px; border-radius:3px 8px 3px 8px; }
#modeMulti  { left:202px; width:208px; border-radius:3px 20px 0 0; }
#modeFriends{ left:416px; width:196px; border-radius:8px 14px 3px 8px; }
#modeRow .modeDisabled{ filter:saturate(.35) brightness(.55); display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:17px; padding-top:1px; cursor:not-allowed; }
#modeRow .modeDisabled::after{ content:attr(title); display:block; font-family:var(--uiFontBody);
  font-size:11px; font-weight:400; letter-spacing:.4px; line-height:12px; color:#0c1440; opacity:.85; }

/* Story intro: a terminal-style boot line, then two short paragraphs
   (one 
 between them, kept by pre-line). */
#bannerBoot{ left:48px; top:58px; width:590px; margin:0; font-family:"IBM Plex Mono", "Courier New", monospace;
  font-size:13px; line-height:18px; letter-spacing:.6px; color:#4fe3c6; text-shadow:0 0 6px rgb(79 227 198 / .45); }
#bannerDesc{ white-space:pre-line; left:48px; top:82px; width:590px; margin:0; font-size:18px; line-height:26px; color:#c7d0ff; }
/* Early-version notice under the description (always a single line). */
#bannerNotice{ left:48px; top:216px; width:590px; margin:0; font-size:15.5px; line-height:20px; color:#f8bb56; }
#bannerNotice::before{ content:"⚠"; margin-right:7px; }
#descLine{ left:48px; right:22px; top:254px; }

#nickLabel{ left:48px; top:266px; font-family:var(--uiFontLabel); font-size:17px; color:var(--uiHdText); letter-spacing:.3px; }
#nickRow{ left:48px; top:296px; width:590px; height:48px; }
#nickRow > *{ position:absolute; top:0; }
/* Not wired up yet — Google sign-in is a future addition, grayed out
   like every other not-yet-available control (#modeSingle/#modeFriends). */
#nickGoogleBtn{ left:0; width:48px; height:48px; border:1.5px solid #3c55d8; border-radius:7px;
  background:linear-gradient(180deg,#050a24,#00020c); display:flex; align-items:center; justify-content:center; }
#nickGoogleBtn:disabled{ opacity:.45; cursor:not-allowed; }
#nickGoogleBtn svg{ width:22px; height:22px; }
#nickInput{ left:58px; width:474px; height:48px; margin:0; padding:0 14px; border:1.5px solid #3c55d8; border-radius:7px;
  background:linear-gradient(180deg,#030820,#00020a); color:#fff; font-family:var(--uiFontBody); font-size:19px;
  outline:none; transition:border-color .15s, box-shadow .15s; }
#nickInput::placeholder{ color:#5f6fb8; }
#nickInput:focus{ border-color:#f5bd5c; box-shadow:0 0 8px rgb(245 189 92 / .45), inset 0 0 8px rgb(245 189 92 / .1); }
#nickRandomBtn{ left:542px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
#nickRandomBtn svg{ width:26px; height:26px; }
#nickError{ left:48px; top:350px; font-size:16px; color:#ff6b6e; }

#bannerButtons{ left:48px; top:386px; width:590px; height:52px; }
#startBtn{ position:absolute; left:0; top:0; width:360px; height:52px; border-radius:6px 24px 24px 6px;
  font-family:var(--uiFontLabel); font-weight:600; font-size:22px; letter-spacing:.8px; color:#241404; transition:filter .15s; }
#startBtn:not(:disabled):hover{ filter:brightness(1.08); }
#startBtn:disabled{ filter:saturate(.25) brightness(.5); cursor:not-allowed; }
/* Loading (ui/loader.js): the gold fills up to --load; the rest is dark.
   isolation + z-index:-1 keeps the dark part above the gold, under the text. */
#startBtn.loading{ isolation:isolate; font-size:17px; letter-spacing:.4px; color:#ffe6b0;
  text-shadow:0 1px 2px rgb(0 0 0 / .8); white-space:nowrap; overflow:hidden; }
#startBtn.loading:disabled{ filter:none; cursor:progress; }
#startBtn.loading::after{ content:""; position:absolute; top:0; bottom:0; left:var(--load, 0%); right:0; z-index:-1;
  background:linear-gradient(90deg, rgb(4 8 30 / .9), rgb(4 8 30 / .78)); transition:left .25s ease-out; }
/* No number yet (the libraries are downloading): a sweeping glint. */
#startBtn.loading.waiting::after{ background:linear-gradient(90deg, rgb(4 8 30 / .9) 30%, rgb(60 50 30 / .9) 50%, rgb(4 8 30 / .9) 70%);
  background-size:300% 100%; animation:startBtnWait 1.4s linear infinite; }
@keyframes startBtnWait{ from{ background-position:100% 0; } to{ background-position:-50% 0; } }
#setupBtn{ position:absolute; left:370px; top:0; width:166px; height:52px; }
#aboutBtn{ position:absolute; left:546px; top:0; width:44px; height:52px; font-size:22px; font-weight:600; color:#ffd98f; }