/* AgarIPO login overlay. Sits above Godot's canvas.
   Nothing is paused: main.gd's _try_join simply returns until window.AGARIPO_PLAYER
   appears, so no company exists on the server until Go public is pressed and there
   is nothing behind the card to drift.

   🔴 Every entrance here is a plain CSS animation with `backwards` fill, never a
   class that JavaScript adds on a timer or an observer. Motion has to FAIL OPEN:
   a reveal that waits on script leaves the card invisible when the script
   hiccups, and an invisible login card is an unplayable game.

   🔴 `backwards`, NOT `both`, and it was `both` and that was a bug. A finished
   animation with a forwards fill keeps HOLDING its last keyframe, and an animated
   value outranks every normal author declaration. Measured on the live page: with
   `.out` applied, computed opacity stayed at 1, so the exit fade never ran and the
   card snapped away instead. `#ipo-play:active` was dead for the same reason.
   `backwards` holds only the FROM value, before the animation starts, which is all
   an entrance ever needed.

   🔴 Contrast is measured, not eyeballed. #f97316 on white is 2.9:1 and is used
   ONLY for fills, rings and borders, never for text. Orange text is #c2410c
   (4.8:1) and the button ground is the same value, because white on #ea580c is
   3.6:1 and 16px bold is not "large text". */

:root {
  --ink: #0b1220;
  --ink-2: #334155;   /* 10.4:1 on white */
  --ink-3: #475569;   /*  7.5:1 on white */
  --ink-4: #64748b;   /*  4.8:1 on white, the lightest text used anywhere */
  --line: #e2e8f0;
  --wash: #f8fafc;
  --brand: #f97316;   /* fills, rings and borders only */
  --brand-ink: #c2410c;
  --ok: #15803d;
  --bad: #b91c1c;
}

#ipo-login {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  /* flex-start + margin:auto, NOT align-items:center: a centred flex item taller
     than the viewport is clipped at the top with no way to scroll back to it. */
  display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px;
  background:
    radial-gradient(1100px 620px at 50% -10%, #1e3a5f 0%, rgba(30,58,95,0) 62%),
    linear-gradient(160deg, #0b1220 0%, #16233b 55%, #0e1a2d 100%);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e2e8f0;
  animation: ipo-fade .34s ease backwards;
}
#ipo-login[hidden] { display: none !important; }
#ipo-login.out { opacity: 0; transform: scale(1.012); transition: opacity .26s ease, transform .26s ease; }

#ipo-card {
  width: min(524px, 100%); margin: auto; background: #fff; color: var(--ink);
  border-radius: 20px; padding: 30px 30px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 28px 70px rgba(2,6,23,.55);
  animation: ipo-rise .5s cubic-bezier(.16,1,.3,1) backwards;
}

/* --- the wordmark --------------------------------------------------------- */
/* Real text, not an image: sharp at any zoom, readable by a screen reader, and
   no extra request on a page that already pulls 43 MB of WebAssembly. The tag
   shape is what makes it a logo rather than a heading, and it is the same shape
   the favicon uses so the tab and the page agree. */
#ipo-head { margin-bottom: 26px; }
#ipo-wordmark {
  display: flex; align-items: baseline; gap: 5px;
  margin: 0 0 8px; font-size: 36px; line-height: 1; letter-spacing: -.045em;
  font-weight: 800;
}
.wm-a { color: var(--ink); }
.wm-b {
  /* White on #a83907 is 6.46:1, measured. The bright --brand is 2.9:1 and is
     never allowed to carry text anywhere in this file. */
  color: #fff; background: linear-gradient(180deg, #c9450a 0%, #a83907 100%);
  padding: 2px 10px 4px; border-radius: 9px; letter-spacing: -.02em;
  box-shadow: 0 3px 10px rgba(169,57,7,.32);
}
#ipo-card p.sub { margin: 0; color: var(--ink-3); font-size: 14px; }

/* --- numbered steps ------------------------------------------------------ */
.ipo-step { margin-bottom: 24px; }
.ipo-step h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 11px; font-size: 13px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--ink-2);
}
.ipo-num {
  display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px;
  /* 🔴 Dark ink, not white. Measured: white on #f97316 is 2.80:1 and a 12px bold
     numeral is not "large text", so it failed AA outright. #0b1220 on the same
     orange is 6.68:1 and keeps the bright badge. */
  border-radius: 50%; background: var(--brand); color: var(--ink);
  font-size: 12px; font-weight: 800; line-height: 1;
}

/* Each block arrives a beat after the one above it. Fixed delays, no observer. */
#ipo-head        { animation: ipo-step-in .44s cubic-bezier(.16,1,.3,1) .04s backwards; }
.ipo-step:nth-of-type(1) { animation: ipo-step-in .44s cubic-bezier(.16,1,.3,1) .10s backwards; }
.ipo-step:nth-of-type(2) { animation: ipo-step-in .44s cubic-bezier(.16,1,.3,1) .16s backwards; }
#ipo-play        { animation: ipo-step-in .44s cubic-bezier(.16,1,.3,1) .22s backwards; }
#ipo-rules, #ipo-note { animation: ipo-step-in .44s cubic-bezier(.16,1,.3,1) .26s backwards; }

/* --- inputs -------------------------------------------------------------- */
#ipo-name, #ipo-search {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#ipo-search { margin: 12px 0 9px; padding: 9px 12px; font-size: 13px; }
#ipo-name::placeholder, #ipo-search::placeholder { color: var(--ink-4); }
#ipo-name:focus, #ipo-search:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(249,115,22,.22);
}

/* --- the mark preview ---------------------------------------------------- */
#ipo-markrow { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
#ipo-preview {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 62px;
  background: #e8edf3 center/cover no-repeat;
  box-shadow: 0 0 0 3px var(--brand), 0 4px 14px rgba(2,6,23,.16);
}
#ipo-preview.pop { animation: ipo-pop .42s cubic-bezier(.2,1.5,.35,1) backwards; }
#ipo-marktext { min-width: 0; }
#ipo-status { font-size: 13px; color: var(--ink-4); }
#ipo-status.err { color: var(--bad); font-weight: 600; }
#ipo-status.ok  { color: var(--ok); font-weight: 600; }

/* --- the company grid ---------------------------------------------------- */
#ipo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px; max-height: 234px; overflow-y: auto; padding: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--wash);
  scrollbar-width: thin;
}
#ipo-grid.empty::after {
  content: "No company by that name. Upload your own logo below.";
  grid-column: 1 / -1; padding: 16px 8px; text-align: center;
  font-size: 12.5px; color: var(--ink-4);
}
/* The name lives UNDER the mark, so the grid reads as a list of companies rather
   than a wall of anonymous circles. A title attribute alone was not enough: most
   of these are pre-IPO startups nobody recognises from the mark. */
.ipo-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px; border: 0; background: none; cursor: pointer;
  border-radius: 10px; font: inherit;
  transition: transform .16s cubic-bezier(.2,1.4,.4,1), background .16s ease, box-shadow .16s ease;
}
.ipo-tile img {
  width: 46px; height: 46px; display: block; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.14);
}
.ipo-tile-name {
  /* 11px, not 10. 10 measured 7.24:1 and passed contrast, and contrast is not
     the whole of legibility: this reader is dyslexic and small type is a defect
     on its own. The name ellipsises sooner and the full one stays on the title. */
  font-size: 11px; line-height: 1.25; color: var(--ink-3); text-align: center;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ipo-tile:hover { transform: translateY(-2px); background: #fff; }
.ipo-tile:hover .ipo-tile-name { color: var(--ink-2); }
.ipo-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.5); }
.ipo-tile.on { background: #fff7ed; box-shadow: 0 0 0 2px var(--brand); }
/* 🔴 The search filter sets el.hidden, and the UA rule `[hidden]{display:none}`
   carries NO !important, so the author `display: flex` above beat it and typing
   in the box hid nothing at all: all 119 tiles stayed on screen under a "no
   company by that name" message. The same trap is handled once at the top of
   this file for #ipo-login and was not generalised. It is now. */
.ipo-tile[hidden] { display: none !important; }
.ipo-tile.on .ipo-tile-name { color: var(--brand-ink); font-weight: 700; }

/* --- the upload zone ------------------------------------------------------ */
/* The picker is the input ITSELF, stretched invisibly over the whole drop zone.
   No label-for, no JS .click() proxy: both of those failed in the wild. */
#ipo-drop {
  position: relative; margin-top: 12px;
  border: 1.5px dashed #cbd5e1; border-radius: 12px; padding: 14px 12px;
  text-align: center; background: var(--wash);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#ipo-drop:hover, #ipo-drop.over { border-color: var(--brand); background: #fff7ed; }
#ipo-drop.over { transform: scale(1.015); }
.ipo-dropmain { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ipo-dropfine { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }
#ipo-file {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
#ipo-file:focus-visible ~ .ipo-dropmain { text-decoration: underline; }

/* --- go ------------------------------------------------------------------- */
#ipo-play {
  margin-top: 4px; width: 100%; padding: 15px; font-size: 16px; font-weight: 800;
  letter-spacing: -.01em; color: #fff; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #c9450a 0%, #a83907 100%);
  box-shadow: 0 6px 18px rgba(169,57,7,.34);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
#ipo-play:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 9px 24px rgba(169,57,7,.42); }
#ipo-play:active:not(:disabled) { transform: scale(.985); box-shadow: 0 3px 10px rgba(169,57,7,.32); }
#ipo-play:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(249,115,22,.45); }
#ipo-play:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; color: #f8fafc; }

#ipo-rules { margin: 18px 0 0; padding: 0 0 0 18px; font-size: 12.5px; color: var(--ink-3); }
#ipo-rules li { margin: 4px 0; }
#ipo-note { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-4); }

/* --- motion --------------------------------------------------------------- */
@keyframes ipo-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ipo-rise {
  from { opacity: 0; transform: translateY(16px) scale(.985) }
  to   { opacity: 1; transform: none }
}
@keyframes ipo-step-in {
  from { opacity: 0; transform: translateY(9px) }
  to   { opacity: 1; transform: none }
}
@keyframes ipo-pop {
  0%   { transform: scale(.72) }
  62%  { transform: scale(1.07) }
  100% { transform: scale(1) }
}

@media (prefers-reduced-motion: reduce) {
  #ipo-login, #ipo-card, #ipo-head, .ipo-step, #ipo-play, #ipo-rules, #ipo-note,
  #ipo-preview.pop { animation: none !important; }
  /* Scoped to the card. A bare `*` would also reach Godot's own canvas and any
     shell element, which this stylesheet has no business touching. */
  #ipo-login, #ipo-login * { transition-duration: .01ms !important; }
}

@media (max-width: 460px) {
  #ipo-card { padding: 22px 18px 20px; border-radius: 16px; }
  #ipo-wordmark { font-size: 29px; }
  #ipo-grid { max-height: 196px; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}