/* s1337.cash design system — shared by every page. */

:root {
  --ink: #0b0b0a;      /* page ground */
  --coal: #12120f;     /* panels */
  --coal-2: #171713;   /* raised panels */
  --line: #26251f;     /* hairlines */
  --line-2: #35342c;
  --bone: #e3ded2;     /* primary text */
  --fog: #8b8579;      /* secondary text */
  --dust: #5b574e;     /* tertiary / labels */
  --red: #c8372d;      /* the accent. the only accent. */
  --red-dim: #7e2620;
  --gold: #b98a2f;
  --lava: #d4552a;
  --wiz: #8f6ad4;
  --wood: #96683c;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: var(--ink); }
a { color: var(--bone); text-decoration-color: var(--red); text-underline-offset: 3px; }
a:hover { color: #fff; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* type */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--bone);
}
.k {
  /* micro label */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
}
.k b, .k .r { color: var(--red); font-weight: 400; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* section headers: "01 / MINT" */
.sec-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 22px; }
.sec-head .idx { font-family: var(--font-mono); font-size: 12px; color: var(--red); }
.sec-head h2 { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }

/* panels with bracket corners */
.panel {
  position: relative;
  background: var(--coal);
  border: 1px solid var(--line);
  padding: 26px 28px;
}
.panel.corners::before, .panel.corners::after {
  content: "";
  position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--line-2);
}
.panel.corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-color: var(--red-dim); }
.panel.corners::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-color: var(--red-dim); }

/* stats */
.stat { font-family: var(--font-mono); font-size: 26px; color: var(--bone); font-variant-numeric: tabular-nums; }
.stat small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dust); margin-top: 4px; }
.stat .unit { font-size: 13px; color: var(--fog); }

/* buttons */
button, .btn {
  display: inline-block;
  background: var(--bone); color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 11px 18px; cursor: pointer;
  transition: background .12s, color .12s;
}
button:hover:not(:disabled), .btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
button:disabled { background: transparent; color: var(--dust); border-color: var(--line); cursor: not-allowed; }
button.ghost, .btn.ghost { background: transparent; color: var(--fog); border-color: var(--line-2); text-transform: none; }
button.ghost:hover:not(:disabled), .btn.ghost:hover { background: transparent; border-color: var(--fog); color: var(--bone); }

/* ---- skeletons ----
   Every figure on these pages comes from a chain call, so the first paint has
   nothing real to show. A row of bare em dashes reads as "empty" or "broken";
   a shimmering block reads as "coming", which is what is actually true.

   The dash stays as the element's text, so the cell is already the right width
   and nothing reflows when the number lands — the skeleton is painted over it
   and lifted off by app.js the moment something real is written. If the chain
   never answers, unskeleton() strips them after a few seconds and the dashes
   come back: no data is an honest thing to show, an endless shimmer is not. */
.skel {
  color: transparent !important;
  background-image: linear-gradient(90deg,
    rgba(227, 222, 210, 0.05) 25%,
    rgba(227, 222, 210, 0.14) 37%,
    rgba(227, 222, 210, 0.05) 63%);
  background-size: 400% 100%;
  animation: skel-sweep 1.5s ease-in-out infinite;
  border-radius: 3px;
  display: inline-block;
  min-width: 2.4ch;
  /* Its own descendants would inherit transparent text and vanish with it. */
  user-select: none;
}
@keyframes skel-sweep {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background-image: linear-gradient(90deg,
    rgba(227, 222, 210, 0.09), rgba(227, 222, 210, 0.09)); }
}
/* Whole tiles, for the grids that arrive as a block: the pool's inventory and
   the soldiers a wallet holds. An empty grid says "you own nothing", which is a
   different answer from the one it is about to give. */
.skel-tile {
  background-image: linear-gradient(90deg,
    rgba(227, 222, 210, 0.04) 25%,
    rgba(227, 222, 210, 0.11) 37%,
    rgba(227, 222, 210, 0.04) 63%);
  background-size: 400% 100%;
  animation: skel-sweep 1.5s ease-in-out infinite;
  border: 1px solid var(--line);
  pointer-events: none;
}
.tok.skel-tile { aspect-ratio: 1; min-height: 92px; }
.card.skel-tile { min-height: 232px; }
@media (prefers-reduced-motion: reduce) { .skel-tile { animation: none; } }
button.danger { background: transparent; color: var(--red); border-color: var(--red-dim); }
button.danger:hover:not(:disabled) { background: var(--red); color: #fff; }

input, textarea, select {
  background: #0e0e0c; color: var(--bone); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px; padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--fog); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-weight: 400; color: var(--dust); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
td { font-family: var(--font-mono); font-size: 13px; }
tr:last-child td { border-bottom: none; }

.muted { color: var(--fog); }
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* the nav — one row, same on every page */
.nav { display: flex; align-items: center; gap: 22px; padding: 20px 0; flex-wrap: wrap; }
.nav .spacer { flex: 1; }
.nav .links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nav .links a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dust); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .12s, border-color .12s;
}
.nav .links a:hover { color: var(--bone); }
.nav .links a.on { color: var(--bone); border-bottom-color: var(--red); }
.nav .netdot { width: 7px; height: 7px; background: var(--line-2); display: inline-block; }
.nav .netdot.ok { background: #4d9960; }
.nav .acct { font-family: var(--font-mono); font-size: 11px; color: var(--fog); }
.nav button { padding: 9px 16px; }
@media (max-width: 720px) { .nav { gap: 14px; } .nav .links { gap: 14px; } }

/* page heads for the non-landing pages */
.pagehead { padding: 26px 0 4px; }
.pagehead h1 { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.1em; text-transform: uppercase; }
.pagehead p { color: var(--fog); font-size: 14px; margin-top: 8px; max-width: 720px; }

/* shared app components (mint / swap / activate) */
.block { margin-top: 22px; }
.block > h3 { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; margin-bottom: 16px; }
.subhead { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dust); margin: 26px 0 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.notice { border: 1px solid var(--red-dim); background: rgba(200,55,45,.05); padding: 12px 16px; font-size: 13px; margin-bottom: 14px; }

.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .lanes { grid-template-columns: 1fr; } }
/* Flex column with the button row pushed down, so the two lanes' buttons sit on
   the same line however much copy each one carries above it. */
.lane { border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column;
        min-height: 190px; }
.lane-price { font-family: var(--font-mono); font-size: 30px; color: var(--bone); line-height: 1; }
.lane-price .unit { font-size: 14px; color: var(--fog); }
.lane-who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-top: 9px; }
.lane-note { color: var(--fog); font-size: 12.5px; margin-top: 8px; }
.lane .btnrow { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lane .btnrow button { padding: 10px 14px; font-size: 11px; letter-spacing: 0.08em; }
/* The snipe lane's id box. Monospace and the same height as the button beside
   it, because a token id is a number you read off a listing and type in — not
   something you should have to go hunting for in a grid. */
.lane .idin {
  width: 8.5em; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px;
  background: var(--ink); color: var(--bone); border: 1px solid var(--line-2);
}
.lane .idin:focus { outline: none; border-color: var(--red); }
.lane.armed { border-color: var(--red-dim); }
/* The slay button when the pot is actually over the threshold. It is clickable
   either way — this is the difference between a swing and a kill. */
button.armed { border-color: var(--red); color: var(--bone); }
.mintbar { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.mintbar .stat { font-size: 21px; }
#mintQty { width: 62px; }

/* Where the 7331 goes. Directly under the lanes, because "free" and "0.01 ETH"
   only mean something next to how many of each there are. Widths are written
   into the markup rather than computed, so the bar is right with JS off. */
.split { margin-top: 18px; }
.split-bar { display: flex; height: 8px; border: 1px solid var(--line); }
.split-bar .seg { display: block; height: 100%; }
.seg-amm { background: var(--line-2); }
.seg-free { background: var(--gold); }
.seg-paid { background: var(--red); }
.split-key {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--bone);
}
.split-key span { display: flex; align-items: center; gap: 7px; }
.split-key small { color: var(--fog); font-family: var(--font); font-size: 12px; }
.split-key .sw { width: 9px; height: 9px; display: inline-block; }
.sw-amm { background: var(--line-2); }
.sw-free { background: var(--gold); }
.sw-paid { background: var(--red); }
.split-note { color: var(--fog); font-size: 12px; margin: 10px 0 0; max-width: 62ch; }
/* Only rendered once the chain says the window is running — there is no
   pre-launch countdown to be wrong about. */
.mintclock {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--red-dim); border-left-width: 3px;
  margin-top: 14px; padding: 12px 16px;
}
.mintclock-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red);
}
.mintclock-t {
  font-family: var(--font-mono); font-size: 30px; line-height: 1; color: var(--bone);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
@media (max-width: 520px) { .mintclock-t { margin-left: 0; font-size: 26px; } }

/* Rare-skin activation boosts. Sits under the lanes because it is the one
   thing that makes a rare roll worth more than a nicer picture. */
.boostbox { border: 1px solid var(--line-2); margin-top: 16px; padding: 14px 16px 16px; }
.boost-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.boost-head b { color: var(--bone); font-weight: 400; font-size: 13.5px; }
.boost-head .muted { font-size: 11.5px; }
.boost-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .boost-row { grid-template-columns: 1fr; } }
.boost { border: 1px solid var(--line); border-left-width: 3px; padding: 10px 12px; }
.boost .bx { display: block; font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--bone); }
.boost .bn { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; }
.boost .br { display: block; font-size: 11.5px; color: var(--dust); margin-top: 4px; }
.boost-lava { border-left-color: var(--lava); }
.boost-lava .bn { color: var(--lava); }
.boost-wiz { border-left-color: var(--wiz); }
.boost-wiz .bn { color: var(--wiz); }
.boost-wood { border-left-color: var(--wood); }
.boost-wood .bn { color: var(--wood); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--line); background: var(--coal); padding: 16px; }
.card .head { display: flex; gap: 12px; align-items: center; }
.card img, .card svg { width: 84px; height: 84px; image-rendering: pixelated; border: 1px solid var(--line); flex: none; }
.card.rare-Lava img { border-color: var(--lava); }
.card.rare-Wizard img { border-color: var(--wiz); }
.card.rare-Wood img { border-color: var(--wood); }
.card .title { font-family: var(--font-mono); font-size: 15px; color: var(--bone); }
.card .sub { font-family: var(--font-mono); font-size: 11px; color: var(--fog); letter-spacing: 0.04em; }
.card .sub.active { color: #4d9960; }
.card .body { margin-top: 12px; font-size: 13px; }
.card .btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.card .btnrow button { padding: 9px 13px; font-size: 11px; }
.rankpick { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.rankpick label { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; border: 1px solid var(--line); padding: 7px 11px; font-family: var(--font-mono); font-size: 12px; }
.rankpick label:hover { border-color: var(--line-2); }
.rankpick label.sel { border-color: var(--red); color: var(--bone); }
.rankpick label .cost { color: var(--dust); }
.rankpick label.sel .cost { color: var(--red); }
.rankpick label .was { text-decoration: line-through; color: var(--dust); margin-right: 6px; }
.pending { color: var(--gold); }

.inv { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.inv .tok { cursor: pointer; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--fog); }
.inv .tok img { width: 62px; height: 62px; image-rendering: pixelated; border: 1px solid var(--line); display: block; margin-bottom: 3px; }
.inv .tok:hover img { border-color: var(--fog); }
.inv .tok.sel img { border-color: var(--red); }
.inv .tok.sel { color: var(--red); }

.swaprow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .swaprow { grid-template-columns: 1fr; } }
.swapform .field { margin-bottom: 14px; }
.swapform .field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dust); margin-bottom: 5px; }
.swapform input, .swapform select { width: 100%; }
#swChart { width: 100%; height: 220px; border: 1px solid var(--line); background: #0e0e0c; display: block; }
.quote { font-family: var(--font-mono); font-size: 12px; color: var(--fog); margin: 10px 0 14px; min-height: 18px; }

.rares { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rare-card { border: 1px solid var(--line); padding: 18px; text-align: center; background: var(--coal); }
.rare-card svg { width: 120px; height: 120px; image-rendering: pixelated; }
.rare-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; margin: 12px 0 2px; }
.rare-card .count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.rare-card.lava h4, .rare-card.lava .count { color: var(--lava); }
.rare-card.wizard h4, .rare-card.wizard .count { color: var(--wiz); }
.rare-card.wood h4, .rare-card.wood .count { color: var(--wood); }

/* the reveal */
.slots { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.slot { width: 120px; }
.slot .face { width: 120px; height: 120px; border: 1px solid var(--line-2); background: #0e0e0c; overflow: hidden; }
.slot .face svg, .slot .face img { width: 120px; height: 120px; display: block; image-rendering: pixelated; }
.slot.rolling .face { filter: blur(1.4px) saturate(.5); opacity: .8; }
.slot.landed .face { animation: pop .28s ease-out; }
@keyframes pop { from { transform: scale(.9); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.slot .cap { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--dust); padding-top: 6px; }
.slot.rare .face { border-color: var(--red); box-shadow: 0 0 22px rgba(200,55,45,.35); }
.slot.rare .cap .skin { color: var(--red); }
.slot.rare-Lava .face { border-color: var(--lava); box-shadow: 0 0 22px rgba(212,85,42,.4); }
.slot.rare-Lava .cap .skin { color: var(--lava); }
.slot.rare-Wizard .face { border-color: var(--wiz); box-shadow: 0 0 22px rgba(143,106,212,.4); }
.slot.rare-Wizard .cap .skin { color: var(--wiz); }
.slot.rare-Wood .face { border-color: var(--wood); box-shadow: 0 0 22px rgba(150,104,60,.4); }
.slot.rare-Wood .cap .skin { color: var(--wood); }

/* status bar */
#statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(10,10,9,.96); border-top: 1px solid var(--line); transform: translateY(100%); transition: transform .18s; }
#statusbar.on { transform: none; }
#statusbar .inner { max-width: 1080px; margin: 0 auto; padding: 9px 24px; display: flex; gap: 14px; align-items: center; }
.status-line { font-family: var(--font-mono); font-size: 12px; color: var(--fog); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-line.ok { color: #4d9960; }
.status-line.err { color: var(--red); }
.status-line.warn { color: var(--gold); }
#statusbar details summary { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dust); cursor: pointer; list-style: none; }
#statusbar details[open] { position: absolute; bottom: 100%; right: 24px; width: min(560px, calc(100vw - 48px)); background: #0a0a09; border: 1px solid var(--line); padding: 12px; }
#log { font-family: var(--font-mono); font-size: 11px; color: var(--fog); max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin-top: 8px; }
#log .ok { color: #4d9960; }
#log .err { color: var(--red); }
#log .warn { color: var(--gold); }

/* dialogs */
dialog { background: var(--coal); color: var(--bone); border: 1px solid var(--line-2); padding: 24px; max-width: 580px; width: 92vw; }
dialog::backdrop { background: rgba(0,0,0,.8); }
dialog h3 { font-family: var(--font-display); font-weight: 400; color: var(--bone); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
dialog .field { margin-bottom: 12px; }
dialog .field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dust); margin-bottom: 4px; }
dialog .field input, dialog .field textarea { width: 100%; }
#revealDlg { max-width: 760px; }

/* logo lockup */
.mark { display: inline-flex; align-items: center; text-decoration: none; }
.mark .word { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); }
.mark .word i { font-style: normal; color: var(--red); }

footer.site { margin-top: 90px; border-top: 1px solid var(--line); padding: 34px 0 60px; }
footer.site .k { margin-bottom: 6px; }

@media (max-width: 640px) {
  .panel { padding: 20px 18px; }
}

/* ---- contracts block: addresses, copy buttons, chain facts ---- */
.chainbar { display: flex; gap: 30px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 6px; }
.chainbar .stat { font-size: 19px; }
.chainbar .stat a { color: var(--bone); }
table.addrs td.a { width: 46%; }
table.addrs td.a code {
  font-family: var(--font-mono); font-size: 12px; color: var(--bone);
  word-break: break-all;
}
table.addrs td.a .pending { color: var(--dust); font-style: normal; letter-spacing: 0.06em; }
table.addrs td.a .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
table.addrs td.a button.copy {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 8px; background: transparent; color: var(--dust); border: 1px solid var(--line); cursor: pointer;
}
table.addrs td.a button.copy:hover { color: var(--bone); border-color: var(--fog); }
table.addrs td.a a.ex { font-size: 11px; color: var(--fog); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 720px) { table.addrs td.a { width: auto; } }

/* ---- wrong-network banner ---- */
#wrongNet {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  background: #2a1408; border-bottom: 1px solid var(--gold);
  font-family: var(--font-mono); font-size: 12px; color: var(--gold);
  padding: 12px 20px; letter-spacing: 0.04em;
}
#wrongNet button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 12px; background: var(--gold); color: #140a02; border: none; cursor: pointer;
}

/* the whitelist snapshot stamp, under the free lane */
.lane-snap {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-top: 8px;
}

/* ---- anti-phishing block ---- */
.phish { padding: 40px 0 0; }
.phish-box { border: 1px solid var(--gold); border-left-width: 3px; padding: 22px 24px; background: #14100a; }
.phish-box h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.phish-box ul { list-style: none; display: grid; gap: 10px; }
.phish-box li { font-size: 13.5px; line-height: 1.6; color: var(--fog); padding-left: 16px; position: relative; }
.phish-box li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.phish-box li b { color: var(--bone); }

.card .sub.boosted { color: var(--lava); }

/* your share of the streams, above the soldier cards */
#myShare { margin: 0 0 16px; }
.sharebar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.sharebar .stat { flex: 1 1 130px; border: 1px solid var(--line); padding: 10px 12px; }
.sharebar .stat span { display: block; font-family: var(--font-mono); font-size: 19px; color: var(--bone); }
.sharebar .stat small { display: block; color: var(--dust); font-size: 11px; margin-top: 3px; }

/* ── entry gate ──────────────────────────────────────────────────────────────
   Shown once per browser, before anything else. It is a real gate rather than
   a dismissible banner: the point is that nobody reaches a mint button without
   having been told what this is. Rendered inert for anyone with JS disabled —
   the site does not work without JS anyway, so a permanent blocking overlay
   would be worse than none. */
#gate {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6, 6, 5, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#gate[hidden] { display: none; }
#gate .card {
  max-width: 560px; width: 100%;
  background: var(--coal); border: 1px solid var(--line-2);
  padding: 30px 32px;
}
#gate h2 {
  font-family: var(--font-display); font-size: 20px; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 16px;
}
#gate h2 i { color: var(--red); font-style: normal; }
#gate p { color: #c9c4b8; font-size: 14px; line-height: 1.65; margin-bottom: 12px; }
#gate ul { margin: 0 0 16px 18px; color: #c9c4b8; font-size: 14px; line-height: 1.65; }
#gate li { margin-bottom: 6px; }
#gate b { color: var(--bone); }
#gate .agree {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--fog);
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px;
  cursor: pointer;
}
#gate .agree input { margin-top: 2px; flex: none; accent-color: var(--red); }
#gate .btnrow { margin-top: 18px; }
#gate button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── mint quantity slider ─────────────────────────────────────────────────── */
input[type="range"]#mintQty {
  -webkit-appearance: none; appearance: none;
  width: 190px; height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]#mintQty::-webkit-slider-runnable-track {
  height: 3px; background: var(--line-2);
}
input[type="range"]#mintQty::-moz-range-track { height: 3px; background: var(--line-2); }
input[type="range"]#mintQty::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5.5px;
  background: var(--red); border: 0;
}
input[type="range"]#mintQty::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--red); border: 0; border-radius: 0;
}
.qtyout {
  font-family: var(--font-mono); font-size: 15px; color: var(--bone);
  min-width: 2.2em; text-align: right;
}


/* Sits directly under the slay button: a swing below the threshold is legal,
   costs the toll and pays nothing, so it has to be said where the button is. */
.slaynote {
  margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px;
  line-height: 1.6; color: var(--dust);
  border-left: 2px solid var(--red-dim); padding-left: 10px;
}
.slaynote b { color: var(--bone); font-weight: 400; }

/* Free-lane fill. The lane is oversubscribed roughly three to one, so this is
   the number people are really watching during the window. */
.freebar {
  height: 6px; border: 1px solid var(--line); margin-top: 14px;
  background: var(--ink); overflow: hidden;
}
.freebar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s; }

/* ---- wallet picker ---- */
/* Injected wallets all fight over window.ethereum, so the site asks over
   EIP-6963 instead and shows what answered. Wallets that did not answer are
   listed anyway, greyed, as a link to install rather than a dead row. */
.wpick {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 6, 5, 0.86);
}
.wpick-card {
  width: 100%; max-width: 380px; background: var(--coal);
  border: 1px solid var(--line-2); padding: 22px 24px 18px;
}
.wpick-card h3 {
  font-family: var(--font-display); font-size: 14px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px;
}
.wpick-list { display: flex; flex-direction: column; gap: 6px; }
.wpick-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; color: var(--bone); border: 1px solid var(--line);
  padding: 11px 13px; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); font-size: 14px; text-decoration: none;
}
.wpick-item:hover:not(.off) { background: var(--coal-2); border-color: var(--fog); color: var(--bone); }
.wpick-item img, .wpick-dot { width: 22px; height: 22px; flex: none; }
.wpick-dot { background: var(--line-2); display: inline-block; }
.wpick-name { flex: 1; text-align: left; }
.wpick-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
}
.wpick-item.off { color: var(--dust); border-color: var(--line); }
.wpick-item.off .wpick-tag { color: var(--dust); }
.wpick-item.off:hover { border-color: var(--line-2); color: var(--fog); }
.wpick-cancel { width: 100%; margin-top: 14px; }

/* ---- free-list checker ----
   Reads the same proofs file the claim uses, so a "yes" here and a working
   claim button cannot disagree. */
.wlcheck { border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 14px; }
.wlcheck label { display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); margin-bottom: 10px; }
.wlcheck-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wlcheck-row input {
  flex: 1 1 320px; min-width: 0; padding: 10px 12px; font-family: var(--font-mono);
  font-size: 13px; background: var(--ink); color: var(--bone); border: 1px solid var(--line-2);
}
.wlcheck-row input:focus { outline: none; border-color: var(--red); }
.wlcheck-out { margin-top: 10px; font-size: 13.5px; min-height: 1.2em; }
.wlcheck-out b { color: var(--bone); }
.wlcheck-out.yes { color: #6fbf73; }
.wlcheck-out.no { color: var(--fog); }
.wlcheck-out.err { color: var(--red); }

/* The drip clock. A global first-come-first-served window is a race, and a race
   nobody can see the start of is just people paying gas to lose. */
.dripmeter { margin-top: 10px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--dust); }
.dripmeter.ready { color: #6fbf73; }
.dripmeter.ready #dripState { font-weight: 600; }