/* bsk.cloud — sign-in gateway.
   Tokens lifted from sites/bluesteelkiosk so the two read as one family.
   Renamed --red-* to --steel-* on the way across: on the Blue Steel site
   those names are a leftover from an earlier red palette and now hold blues,
   which reads as a bug every time you meet it. */
:root{
  /* Neutrals — charcoal base, never pure black */
  --ink-950:#0a0c11; --ink-900:#0e1118; --ink-850:#151a23; --ink-800:#1b212d;
  --ink-700:#252c39;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --fg:#e8edf6; --fg-dim:#9aa6ba; --fg-mute:#6a7589;

  /* Brand steel-blue (metallic) */
  --steel-1:#d2e2ff; --steel-2:#5b9dff; --steel-3:#2f6bdb; --steel-4:#143a86;
  --accent:#4187f0;
  --accent-metal:linear-gradient(135deg,var(--steel-1),var(--steel-2) 42%,var(--steel-3) 72%,var(--steel-4));
  --accent-soft:rgba(65,135,240,.15);

  --font-display:"Clash Display",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Satoshi",ui-sans-serif,system-ui,sans-serif;

  --r-lg:2rem; --r-md:1.1rem; --r-sm:.6rem;
  --shadow-glass:0 30px 70px -34px rgba(0,0,0,.78);
  --shadow-accent:0 18px 44px -20px rgba(31,72,160,.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:820px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* min-height, not height: a short laptop window or a phone in landscape
     must be allowed to scroll rather than clip the sign-in buttons. */
  min-height:100svh;
  display:flex; flex-direction:column;
  background:var(--ink-950);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Ambient layers ------------------------------------------------------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.32'/></svg>");
}
.glow{
  position:fixed; inset:auto 0 auto 50%; top:-14vmax;
  width:min(880px,120vw); height:min(880px,120vw);
  transform:translateX(-50%);
  pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 40%,rgba(65,135,240,.22),transparent 62%);
  filter:blur(30px);
}

/* Shell ---------------------------------------------------------------- */
.shell{
  position:relative; z-index:1;
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,6vw,64px) clamp(20px,5vw,32px);
}
.stack{
  width:100%; max-width:var(--maxw);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(22px,4vw,38px);
  text-align:center;
}

.brand{display:block;line-height:0}
/* A 640x225 horizontal lockup — sized by WIDTH, so it needs far more of it
   than a square mark would to keep "BLUE STEEL" legible. */
.brand img{width:clamp(168px,26vw,232px);height:auto}

.head{display:flex;flex-direction:column;gap:.55rem;align-items:center}
.wordmark{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.5rem,7vw,4.25rem);
  letter-spacing:-.02em; line-height:1;
  background:var(--accent-metal);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* Fallback for engines that don't paint transparent-clipped text. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{background:none;color:var(--steel-1)}
}
/* ⚠️ This span lives inside a `background-clip:text` + `color:transparent`
   parent, so it MUST paint its own colour or it inherits the transparent and
   renders nothing at all. An `opacity` here is worse still: it forms its own
   compositing group, which the parent's clipped gradient cannot reach into —
   that is exactly how " Cloud" vanished from the wordmark on first render. */
.wm-thin{
  font-weight:600;
  background:none;
  color:var(--fg);
  -webkit-text-fill-color:var(--fg);
}
.orient{
  margin:0; max-width:46ch;
  color:var(--fg-dim); font-size:clamp(.98rem,1.6vw,1.0625rem);
  /* Without this the line breaks after "at", stranding "them." alone. */
  text-wrap:balance;
}

/* The two doors -------------------------------------------------------- */
.doors{
  width:100%;
  display:grid; gap:clamp(14px,2.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.door{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; gap:.4rem;
  padding:clamp(20px,3vw,26px);
  min-height:168px;
  text-align:left; text-decoration:none;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(27,33,45,.92),rgba(10,12,17,.94));
  box-shadow:var(--shadow-glass);
  color:var(--fg);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
a.door:hover,a.door:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(65,135,240,.55);
  box-shadow:var(--shadow-glass),var(--shadow-accent);
}
a.door:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.door-label{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.5rem); line-height:1.15;
}
.door-blurb{color:var(--fg-dim);font-size:.95rem;line-height:1.45}
.door-go{
  margin-top:auto; padding-top:.7rem;
  font-weight:600; font-size:.95rem; color:var(--steel-2);
}
.door-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.door-shine::after{
  content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.10),transparent);
  transform:translateX(-30%); opacity:0;
  transition:opacity .4s var(--ease);
}
a.door:hover .door-shine::after{opacity:1;animation:sweep 1.4s var(--ease)}
@keyframes sweep{0%{left:-70%}100%{left:140%}}

/* Disabled door: dimmed, no pointer affordance, not focusable (it is a div). */
/* Dimmed enough to read as unavailable, NOT so dim that the label stops being
   legible — the whole point of showing this card is that a player can read
   what is coming. .58 over --fg-mute failed that on the first render. */
.door-off{
  opacity:.72;
  background:linear-gradient(165deg,rgba(21,26,35,.86),rgba(10,12,17,.9));
  border-style:dashed; border-color:var(--line);
  box-shadow:none;
  cursor:default;
}
.door-pending{
  color:var(--fg-dim); font-weight:500;
  display:inline-flex; align-items:center; gap:.45rem;
}
.door-pending::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--fg-dim); flex:none;
}

/* Player portal ------------------------------------------------------- */
.lede{
  margin:0; color:var(--fg);
  font-size:clamp(1.05rem,2vw,1.25rem); font-weight:500;
  text-wrap:balance;
}
.panel{
  width:100%;
  padding:clamp(20px,3.4vw,30px);
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(27,33,45,.92),rgba(10,12,17,.94));
  box-shadow:var(--shadow-glass);
  text-align:left;
}
.panel-body{margin:0;color:var(--fg-dim)}
.facts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.7rem}
.fact{
  position:relative; padding-left:1.7rem;
  color:var(--fg); font-size:.98rem; line-height:1.45;
}
.fact::before{
  position:absolute; left:0; top:.05em;
  font-size:1rem; line-height:1.4;
}
/* Marked aria-hidden by being pure CSS content: these are decorative, and the
   sentence carries the meaning on its own for a screen reader. */
.fact-now::before{content:"\2192";color:var(--steel-2)}
.fact-safe::before{content:"\2713";color:var(--steel-2)}
.aside{margin:0;color:var(--fg-mute);font-size:.92rem}
.aside a{color:var(--fg-dim)}
.aside a:hover,.aside a:focus-visible{color:var(--steel-2)}

/* Footer --------------------------------------------------------------- */
.foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  align-items:center; justify-content:center;
  padding:0 20px clamp(20px,4vw,32px);
  color:var(--fg-mute); font-size:.85rem; text-align:center;
}
.foot p{margin:0;text-wrap:balance}
.foot a{color:var(--fg-dim);text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--steel-2);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  a.door:hover,a.door:focus-visible{transform:none}
}