/* ── ETH panel ────────────────────────────────────────────────────────────────
   Wallet, balance, deposit, withdraw, duel and shop. Same palette and typography as
   landing.css and the Unity menu: Chakra Petch, amber on near black, stencil display.

   Layout rules that matter:
     * the card is a column with a fixed head and a scrolling body, so a long shop
       list never pushes the back button off screen
     * on a phone it becomes a sheet anchored to the bottom, inside the safe area
     * every interactive element is at least 44px tall, because this is played on
       touch screens and a 28px button is a miss waiting to happen
   ────────────────────────────────────────────────────────────────────────────── */

#trenches-eth {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 5, 7, 0.84);
  backdrop-filter: blur(8px);
  font-family: "Chakra Petch", system-ui, sans-serif;
  color: #e8eaed;
  opacity: 0;
  transition: opacity 0.18s ease;
}

#trenches-eth.show { display: flex; opacity: 1; }

#trenches-eth .te-card {
  display: flex;
  flex-direction: column;
  width: min(94vw, 460px);
  max-height: min(86vh, 760px);
  background: linear-gradient(180deg, #12151a 0%, #0c0e11 100%);
  border: 1px solid #262b33;
  border-radius: 18px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.22s ease;
}
#trenches-eth.show .te-card { transform: none; opacity: 1; }

/* the amber hairline the game uses on every panel edge */
#trenches-eth .te-card::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c6ff00 22%, #c6ff00 78%, transparent);
  opacity: 0.75;
}

/* ── head ─────────────────────────────────────────────────────────────────── */

#trenches-eth .te-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #1b1e24;
}

#trenches-eth .te-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  background: #171a1f;
  border: 1px solid #272c34;
  border-radius: 9px;
  color: #9aa1ab;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#trenches-eth .te-back:hover { border-color: #c6ff00; color: #c6ff00; background: #1c2026; }
#trenches-eth .te-back[hidden] { display: none; }

#trenches-eth .te-title {
  flex: 1;
  font-family: "Big Shoulders Stencil Text", "Chakra Petch", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #c6ff00;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#trenches-eth .te-close {
  width: 34px;
  height: 34px;
  flex: none;
  background: #171a1f;
  border: 1px solid #272c34;
  border-radius: 9px;
  color: #7a828c;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#trenches-eth .te-close:hover { border-color: #e2574c; color: #e2574c; }

/* ── tabs ─────────────────────────────────────────────────────────────────── */

#trenches-eth .te-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#trenches-eth .te-tabs::-webkit-scrollbar { display: none; }

#trenches-eth .te-tab {
  flex: 1 0 auto;
  min-height: 38px;
  padding: 0 12px;
  background: none;
  border: 0;
  border-bottom: 2px solid #1b1e24;
  color: #6f767f;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#trenches-eth .te-tab:hover { color: #b9c0c9; }
#trenches-eth .te-tab.active { color: #c6ff00; border-bottom-color: #c6ff00; }

/* ── body ─────────────────────────────────────────────────────────────────── */

#trenches-eth .te-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#trenches-eth .te-body > * { animation: te-rise 0.2s ease both; }

@keyframes te-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

#trenches-eth .te-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #171a1e;
  font-size: 13px;
}
#trenches-eth .te-row:last-child { border-bottom: 0; }
#trenches-eth .te-row .k {
  color: #767d87;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
  white-space: nowrap;
}
#trenches-eth .te-row .v { font-variant-numeric: tabular-nums; text-align: right; }

#trenches-eth .te-big {
  font-family: "Big Shoulders Stencil Text", "Chakra Petch", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.05;
}
#trenches-eth .te-big span { font-size: 14px; color: #767d87; margin-left: 7px; letter-spacing: 0.1em; }

#trenches-eth .te-label {
  display: block;
  margin: 16px 0 4px;
  color: #767d87;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#trenches-eth .te-sub { color: #767d87; font-size: 12.5px; line-height: 1.6; margin: 6px 0 0; }
#trenches-eth .te-sub b { color: #b9c0c9; }

#trenches-eth .te-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #b9c0c9;
  word-break: break-all;
}

/* ── inputs ───────────────────────────────────────────────────────────────── */

#trenches-eth input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 13px 15px;
  background: #14171c;
  border: 1px solid #272c34;
  border-radius: 11px;
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s;
}
#trenches-eth input[type="text"]:focus { outline: 0; border-color: #c6ff00; }
#trenches-eth input[type="text"]::placeholder { color: #4d545d; }

#trenches-eth .te-presets { display: flex; gap: 6px; margin-top: 8px; }
#trenches-eth .te-presets button {
  flex: 1;
  min-height: 38px;
  background: #14171c;
  border: 1px solid #272c34;
  border-radius: 9px;
  color: #9aa1ab;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#trenches-eth .te-presets button:hover { border-color: #c6ff00; color: #c6ff00; }
#trenches-eth .te-presets button[aria-pressed="true"] { border-color: #c6ff00; color: #c6ff00; background: #1d2026; }

/* ── buttons ──────────────────────────────────────────────────────────────── */

#trenches-eth .te-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg, #c6ff00 0%, #8eb800 100%);
  border: 0;
  border-radius: 11px;
  color: #10120f;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s, transform 0.08s;
}
#trenches-eth .te-btn:hover { filter: brightness(1.08); }
#trenches-eth .te-btn:active { transform: translateY(1px); }
#trenches-eth .te-btn:disabled {
  background: #23272e;
  color: #6b727b;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

#trenches-eth .te-btn.ghost {
  background: none;
  border: 1px solid #2a2f36;
  color: #9aa1ab;
  font-weight: 700;
}
#trenches-eth .te-btn.ghost:hover { border-color: #c6ff00; color: #c6ff00; filter: none; }

/* ── notices ──────────────────────────────────────────────────────────────── */

#trenches-eth .te-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
}
#trenches-eth .te-note.warn { background: rgba(198, 255, 0, 0.09); border: 1px solid rgba(198, 255, 0, 0.3); color: #f0c383; }
#trenches-eth .te-note.err  { background: rgba(226, 87, 76, 0.09);  border: 1px solid rgba(226, 87, 76, 0.34);  color: #eb8f86; }
#trenches-eth .te-note.ok   { background: rgba(76, 200, 120, 0.09); border: 1px solid rgba(76, 200, 120, 0.3);  color: #7fd6a0; }
#trenches-eth .te-note a { color: inherit; text-underline-offset: 3px; }
#trenches-eth .te-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── item cards ───────────────────────────────────────────────────────────── */

#trenches-eth .te-item {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #272c34;
  border-radius: 13px;
  background: #101317;
  transition: border-color 0.15s;
}
#trenches-eth .te-item:hover { border-color: #363d47; }
#trenches-eth .te-item.focus { border-color: #c6ff00; }

#trenches-eth .te-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
#trenches-eth .te-item-name {
  font-family: "Big Shoulders Stencil Text", "Chakra Petch", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#trenches-eth .te-rarity {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
#trenches-eth .te-rarity.godly     { background: rgba(200, 80, 220, 0.16); color: #d98ce8; }
#trenches-eth .te-rarity.legendary { background: rgba(198, 255, 0, 0.16); color: #f0be7a; }
#trenches-eth .te-rarity.epic      { background: rgba(90, 140, 240, 0.16); color: #8fb0f2; }
#trenches-eth .te-rarity.default   { background: rgba(140, 150, 160, 0.14); color: #a7aeb7; }

#trenches-eth .te-price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
#trenches-eth .te-fiat { color: #767d87; font-size: 12.5px; font-weight: 400; margin-left: 6px; }

#trenches-eth .te-owned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7fd6a0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── risk panel ───────────────────────────────────────────────────────────── */

#trenches-eth .te-risk {
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px solid #33383f;
  border-radius: 12px;
  background: #101317;
}
#trenches-eth .te-risk h3 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #c6ff00;
  text-transform: uppercase;
}

/* ── states ───────────────────────────────────────────────────────────────── */

#trenches-eth .te-empty {
  padding: 30px 10px;
  text-align: center;
  color: #767d87;
  font-size: 13px;
  line-height: 1.6;
}

#trenches-eth .te-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(198, 255, 0, 0.25);
  border-top-color: #c6ff00;
  border-radius: 50%;
  animation: te-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes te-spin { to { transform: rotate(360deg); } }

#trenches-eth .te-skeleton {
  height: 84px;
  margin-top: 12px;
  border-radius: 13px;
  background: linear-gradient(90deg, #14171c 25%, #1b1f25 50%, #14171c 75%);
  background-size: 200% 100%;
  animation: te-sweep 1.1s linear infinite;
}
@keyframes te-sweep { to { background-position: -200% 0; } }

/* ── phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  #trenches-eth { padding: 0; align-items: flex-end; }
  #trenches-eth .te-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(26px);
  }
  #trenches-eth.show .te-card { transform: none; }
  #trenches-eth .te-title { font-size: 19px; }
  #trenches-eth .te-big { font-size: 30px; }
  #trenches-eth .te-tab { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  #trenches-eth, #trenches-eth .te-card, #trenches-eth .te-body > * { transition: none; animation: none; }
}

/* ── the landing wallet pill ──────────────────────────────────────────────── */

#tl-eth-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 13px;
  background: rgba(10, 12, 15, 0.82);
  border: 1px solid #2a2f36;
  border-radius: 999px;
  color: #e8eaed;
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s;
}
#tl-eth-pill:hover { border-color: #c6ff00; }
#tl-eth-pill .amount { color: #c6ff00; font-weight: 700; font-variant-numeric: tabular-nums; }
#tl-eth-pill .who { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #8b929c; }