/* ROOFTOP QUEST — the wallet gate.
 *
 * Owned by src/ui/walletgate.js. Everything here is prefixed .wg- and every
 * colour, space and radius comes from assets/theme.css; a raw number below is a
 * geometry decision (a wallet icon is 30px) and never a colour.
 *
 * It is the sibling of the how-to panel in assets/landing.css and is built the
 * same way on purpose — a scrim, one .card--solid panel, ps-pop-in — because a
 * card that arrives differently reads as a different app's dialog bolted on.
 * The one deliberate difference is the green hairline on the Robinhood row:
 * this game runs on that chain, and the row that matters should look like it.
 *
 * ⚠ Every element the script toggles with `hidden` gets its own [hidden] rule.
 * A display: flex here beats the user-agent [hidden] rule on specificity, so
 * without those lines the wallet list and the connected card are on screen at
 * the same time and nothing about it looks like a bug in CSS.
 */

/* ==================================================================== shell */

.wg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.wg[hidden] { display: none; }

/* theme.css sizes `.icon`, but src/ui/icons.js emits `.ico`. Same note as
 * assets/landing.css: neither name is a typo, and the gate has to size the one
 * it actually gets or every glyph falls back to its 1em presentation size. */
.wg .ico {
  display: block;
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  color: inherit;
}

.wg__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 32, 0.62);
  animation: ps-fade-in var(--dur-2) var(--ease-out) both;
}

.wg__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: min(86vh, 680px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  animation: ps-pop-in var(--dur-3) var(--ease-pop) both;
}

/* ===================================================================== head */

.wg__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.wg__mark {
  --icon-size: 26px;
  color: var(--c-green);
  stroke-width: 2.4;
}

.wg__title { flex: 1 1 auto; min-width: 0; }

.wg__x {
  --icon-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-surface-3);
  color: var(--c-text-dim);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.wg__x:hover { color: var(--c-text); background: var(--c-line); }

.wg__lede {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

/* The promise the whole feature rests on, so it is stated before the buttons
 * and not in small print under them. */
.wg-safe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.wg-safe__c { --icon-size: 14px; }
.wg-safe__c .ico { color: var(--c-green); stroke-width: 2.8; }

/* ============================================================= wallet list */

.wg-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.wg-list[hidden] { display: none; }

.wg-w {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: rgba(18, 14, 32, 0.5);
  border: 1px solid var(--c-line);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.wg-w:hover { border-color: var(--c-line-strong); background: rgba(18, 14, 32, 0.68); }

/* The chain this game is on. Green edge, green button, and it is sorted first
 * by src/web3/wallet.js — three cues for one decision, because a list of five
 * identical rows is a list nobody reads. */
.wg-w--home {
  border-color: rgba(92, 192, 106, 0.55);
  background: rgba(47, 122, 60, 0.22);
}

.wg-w--home:hover { border-color: var(--c-green); background: rgba(47, 122, 60, 0.3); }

.wg-w__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--c-surface-2);
  box-shadow: 0 2px 0 rgba(18, 14, 32, 0.4);
}

.wg-w__img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback when the wallet ships no usable icon. A letter is still a picture;
 * a broken <img> frame is not. */
.wg-w__mono {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--c-cream);
}

.wg-w__name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-tight);
  color: var(--c-cream);
}

.wg-w__tag {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-green);
}

.wg-w__b { flex: 0 0 auto; }

/* --------------------------------------------------------- nothing found */

.wg-none {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

.wg-none[hidden] { display: none; }

.wg-none__link {
  --icon-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--c-green);
  font-weight: var(--fw-black);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}

.wg-none__link:hover { border-bottom-color: rgba(92, 192, 106, 0.6); }

/* ============================================================== connected */

.wg-me {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: rgba(18, 14, 32, 0.5);
  border: 1px solid var(--c-line-strong);
}

.wg-me[hidden] { display: none; }

.wg-me__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

/* Same live dot as the landing eyebrow: connected is a state, not an event, so
 * it breathes rather than flashing once. */
.wg-me__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 0 4px rgba(92, 192, 106, 0.2);
  animation: ps-pulse 2.4s var(--ease-out) infinite;
}

.wg-me__dot.is-bad {
  background: var(--c-butter);
  box-shadow: 0 0 0 4px rgba(255, 224, 122, 0.18);
}

.wg-me__addr {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  color: var(--c-cream);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}

.wg-me__addr:hover { border-bottom-color: var(--c-line-strong); }

.wg-me__chain { color: var(--c-green); border-color: rgba(92, 192, 106, 0.45); }

/* Wrong chain is a thing to fix, not a failure — butter, not coral, and the
 * switch button below is the actual message. */
.wg-me__chain.is-bad { color: var(--c-butter); border-color: rgba(255, 224, 122, 0.45); }

.wg-me__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.wg-me__switch[hidden] { display: none; }

.wg-me__forget {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text-mute);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.wg-me__forget:hover { color: var(--c-text); border-bottom-color: var(--c-line-strong); }

/* ================================================================ messages */

/* Everything the wallet can refuse ends up here, in a sentence. It is a
 * role="status" so a screen reader hears the refusal too — a card that only
 * shows the failure to people looking at it is not handling the failure. */
.wg-msg {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  border: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

.wg-msg[hidden] { display: none; }

.wg-msg.is-warn { color: var(--c-butter); border-color: rgba(255, 224, 122, 0.4); }
.wg-msg.is-bad { color: var(--c-coral); border-color: rgba(255, 95, 125, 0.4); }

.wg__foot {
  margin-top: calc(var(--s-1) * -1);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-mute);
  text-align: center;
}

/* ============================================================== responsive
 *
 * One breakpoint. The row is icon + name + button and the button is the part
 * that must not shrink, so on a narrow phone the padding goes first. */

@media (max-width: 400px) {
  .wg__panel { gap: var(--s-2); padding: var(--s-4); }
  .wg__mark { --icon-size: 22px; }
  .wg-w { padding: var(--s-2); gap: var(--s-2); }
  .wg-w__ico { width: 26px; height: 26px; }
  .wg-safe__c { padding: var(--s-1) var(--s-2); }
  .wg-me { padding: var(--s-3); }
}