/* token.css — CIOW Token page (/token) only.
   Tokenomics, presale stages and claim instructions for CIOW WORLD.
   Loaded after /styles.css so it can reuse the site's design tokens:
   --pixel --body --gold --sky --panel --grass --on-sky --dirt.
   Pixel language: 3px black borders, inset highlight / shadow, square corners. */

body.token {
  /* light sections (default) sit on the sky gradient */
  --token-ink: var(--on-sky);
  --token-ink-soft: var(--on-sky-body);
}

/* ---------- layout helpers ---------- */

.token-lede {
  font-size: 1.1rem;
  color: var(--on-sky-body);
  max-width: 62ch;
  margin: 0 0 1.6rem;
}

.token-prose p {
  color: var(--on-sky-body);
  font-size: 1.05rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.section.alt .token-prose p,
.section.alt .token-lede {
  color: #fff8e7;
}

.token-subhead {
  margin: 2.4rem 0 1rem;
  color: var(--on-sky);
}

.section.alt .token-subhead {
  color: #fff8e7;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.token-inline-note {
  font-size: 0.95rem;
  color: var(--on-sky-body);
  margin: 0.9rem 0 0;
}

/* the placeholder contract line: readable, never a fake link */
.token-contract {
  display: inline-block;
  font: 400 0.68rem/1.5 var(--pixel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--panel2);
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 #4a4a4a, inset -3px -3px 0 #000, 4px 4px 0 rgba(0, 0, 0, 0.4);
  padding: 0.7rem 0.9rem;
  margin: 0.2rem 0 1.2rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.section.alt .token-contract {
  color: #ffd75e;
}

/* ---------- stat strip ---------- */

.token-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 1.6rem;
  padding: 0;
  border: 4px solid #000;
  background: var(--panel);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

.token-stat {
  padding: 1.1rem 1rem;
  border-right: 4px solid #000;
  min-width: 0;
}

.token-stat:last-child {
  border-right: 0;
}

.token-stat dt {
  font: 400 0.55rem/1.5 var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

.token-stat dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.token-stat dd strong {
  font: 400 0.85rem/1.4 var(--pixel);
  color: var(--gold);
  overflow-wrap: anywhere;
}

.token-stat-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- allocation table ---------- */

.token-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 4px solid #000;
  background: var(--panel2);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  -webkit-overflow-scrolling: touch;
}

.token-alloc table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  table-layout: fixed;
}

.token-alloc caption {
  text-align: left;
}

.token-alloc th,
.token-alloc td {
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 3px solid #000;
  overflow-wrap: anywhere;
}

.token-alloc thead th {
  font: 400 0.6rem/1.4 var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #101010;
  background: var(--gold);
  border-bottom: 3px solid #000;
}

.token-alloc thead th:not(:last-child) {
  border-right: 3px solid #000;
}

.token-alloc tbody th {
  font: 500 1rem/1.4 var(--body);
  color: var(--text);
}

.token-alloc tbody td {
  font: 500 1rem/1.4 var(--body);
  color: var(--muted);
}

.token-alloc tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}

.token-alloc tfoot th,
.token-alloc tfoot td {
  border-bottom: 0;
  border-top: 3px solid #000;
  font: 400 0.68rem/1.4 var(--pixel);
  color: var(--gold);
  background: rgba(240, 185, 11, 0.12);
}

/* ---------- allocation bars (CSS only) ---------- */

.token-bars {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.token-bar-row {
  border: 3px solid #000;
  background: var(--panel);
  box-shadow: inset 3px 3px 0 #4a4a4a, inset -3px -3px 0 #000, 4px 4px 0 rgba(0, 0, 0, 0.35);
  padding: 0.9rem 1rem;
  min-width: 0;
}

.token-bar-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.6rem;
  font: 500 1rem/1.4 var(--body);
  color: var(--text);
}

.token-bar-name {
  color: #ffc42b;
}

.token-bar-value {
  font: 400 0.6rem/1.4 var(--pixel);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.token-bar {
  position: relative;
  height: 18px;
  border: 3px solid #000;
  background: #171717;
  overflow: hidden;
}

.token-bar-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  box-shadow: inset 3px 3px 0 var(--gold-l), inset -3px -3px 0 var(--gold-d);
  transform-origin: left center;
  animation: token-bar-in 0.7s steps(6, end) both;
}

/* Bar widths live here, not in style="" attributes: the site CSP is style-src 'self',
   so an inline style attribute is dropped and the bars would render empty.
   Each width is the bucket's exact share of the 1,000,000,000 supply. */
.token-bar-row:nth-child(1) .token-bar-fill { width: 4.444%; }
.token-bar-row:nth-child(2) .token-bar-fill { width: 2.1795%; }
.token-bar-row:nth-child(3) .token-bar-fill { width: 30%; }
.token-bar-row:nth-child(4) .token-bar-fill { width: 20.25%; }
.token-bar-row:nth-child(5) .token-bar-fill { width: 43.1265%; }

/* Style variants keep the five bars distinguishable without new colours */
.token-bar-row:nth-child(1) .token-bar-fill { background: var(--gold); }
.token-bar-row:nth-child(2) .token-bar-fill { background: var(--grass); box-shadow: inset 3px 3px 0 #a0e081, inset -3px -3px 0 #2a641c; }
.token-bar-row:nth-child(3) .token-bar-fill { background: var(--sky); box-shadow: inset 3px 3px 0 #cfefff, inset -3px -3px 0 #5ba3c7; }
.token-bar-row:nth-child(4) .token-bar-fill { background: #ffc42b; }
.token-bar-row:nth-child(5) .token-bar-fill { background: #a0683a; box-shadow: inset 3px 3px 0 #c68f5e, inset -3px -3px 0 #5c3a1e; }

@keyframes token-bar-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.token-bar-note {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- presale stages ---------- */

.token-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.6rem;
}

.token-panel {
  border: 4px solid #000;
  background: var(--panel);
  box-shadow: inset 4px 4px 0 #4a4a4a, inset -4px -4px 0 #000, 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 1.2rem 1.1rem;
  min-width: 0;
}

.token-panel h3 {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--gold);
}

.section:not(.alt) .token-panel h3 {
  color: var(--gold);
}

.token-kv {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.token-kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 2px solid #000;
  padding-bottom: 0.4rem;
  min-width: 0;
}

.token-kv > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.token-kv dt {
  font: 400 0.55rem/1.5 var(--pixel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 1 auto;
}

.token-kv dd {
  margin: 0;
  font: 500 1rem/1.4 var(--body);
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---------- rules list ---------- */

.token-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.token-rules li {
  position: relative;
  padding: 0.6rem 0.8rem 0.6rem 2rem;
  border: 3px solid #000;
  background: var(--panel2);
  color: #fff8e7;
  font-size: 1rem;
  box-shadow: inset 3px 3px 0 #3a3a3a, inset -3px -3px 0 #000;
}

.token-rules li::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.95rem;
  width: 9px;
  height: 9px;
  background: var(--gold);
  border: 2px solid #000;
}

/* ---------- claim blocks ---------- */

.token-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.token-claim h3 {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--gold);
}

.section:not(.alt) .token-claim h3 {
  color: var(--gold);
}

.token-steps {
  counter-reset: token-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.token-steps li {
  counter-increment: token-step;
  position: relative;
  padding: 0.7rem 0.8rem 0.7rem 2.6rem;
  border: 3px solid #000;
  background: var(--panel2);
  color: var(--text);
  font-size: 1rem;
  box-shadow: inset 3px 3px 0 #3a3a3a, inset -3px -3px 0 #000;
  min-height: 44px;
}

.token-steps li::before {
  content: counter(token-step);
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  font: 400 0.6rem/1 var(--pixel);
  color: #101010;
  background: var(--gold);
  border: 2px solid #000;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .token-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .token-stat {
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;
  }

  .token-stat:nth-child(2n) {
    border-right: 0;
  }

  .token-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .token-stages {
    grid-template-columns: minmax(0, 1fr);
  }

  .token-two {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
}

@media (max-width: 600px) {
  .token-lede {
    font-size: 1rem;
  }

  /* stacked allocation table: no horizontal scroll on a phone */
  .token-alloc table,
  .token-alloc thead,
  .token-alloc tbody,
  .token-alloc tfoot,
  .token-alloc tr,
  .token-alloc th,
  .token-alloc td {
    display: block;
    width: 100%;
  }

  .token-alloc thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .token-alloc tr {
    border-bottom: 3px solid #000;
    padding: 0.5rem 0;
  }

  .token-alloc tbody tr:last-child,
  .token-alloc tfoot tr {
    border-bottom: 0;
  }

  .token-alloc tbody th,
  .token-alloc tfoot th {
    border-bottom: 0;
    padding-bottom: 0.25rem;
    font-size: 1rem;
  }

  .token-alloc tbody td,
  .token-alloc tfoot td {
    border-bottom: 0;
    padding: 0.15rem 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .token-alloc tbody td::before,
  .token-alloc tfoot td::before {
    content: attr(data-label);
    font: 400 0.55rem/1.5 var(--pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .token-bar-value {
    font-size: 0.55rem;
  }
}

@media (max-width: 560px) {
  .token-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .token-stat {
    border-right: 0;
    border-bottom: 4px solid #000;
  }

  .token-stat:nth-last-child(-n + 2) {
    border-bottom: 4px solid #000;
  }

  .token-stat:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 360px) {
  .token-stat {
    padding: 0.9rem 0.75rem;
  }

  .token-bar-row,
  .token-panel {
    padding: 0.8rem 0.7rem;
  }

  .token-steps li {
    padding: 0.65rem 0.6rem 0.65rem 2.4rem;
    font-size: 0.95rem;
  }
}

/* ---------- FCFS claim panel ----------
   Selectors are .token-claim-* and never touch .token-claim h3 or .token-steps.
   Which block shows is decided by #claimBox[data-state]; the JS only ever writes
   that one attribute (plus text and disabled). */

.token-claim-box {
  margin-top: 1.2rem;
  padding: 1rem;
  border: 3px solid #000;
  background: var(--panel2);
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.token-claim-box > * {
  min-width: 0;
}

/* Every block is hidden unless the current state asks for it. Default off keeps a
   half-filled panel from flashing fields the state machine has not reached. */
.token-claim-when-disconnected,
.token-claim-when-connected,
.token-claim-when-ready,
.token-claim-when-sent,
.token-claim-box .token-claim-facts,
.token-claim-box .token-claim-list {
  display: none;
}

.token-claim-box[data-state="disconnected"] .token-claim-when-disconnected,
.token-claim-box[data-state="wrong-chain"] .token-claim-when-connected,
.token-claim-box[data-state="reading"] .token-claim-when-connected,
.token-claim-box[data-state="ready"] .token-claim-when-connected,
.token-claim-box[data-state="no-id"] .token-claim-when-connected,
.token-claim-box[data-state="other-owner"] .token-claim-when-connected,
.token-claim-box[data-state="unknown-id"] .token-claim-when-connected,
.token-claim-box[data-state="already-claimed"] .token-claim-when-connected,
.token-claim-box[data-state="closed"] .token-claim-when-connected,
.token-claim-box[data-state="signing"] .token-claim-when-connected,
.token-claim-box[data-state="pending"] .token-claim-when-connected,
.token-claim-box[data-state="confirmed"] .token-claim-when-connected,
.token-claim-box[data-state="failed"] .token-claim-when-connected {
  display: grid;
  gap: 0.6rem;
}

/* The readouts belong to the states that have something to read. */
.token-claim-box[data-state="reading"] .token-claim-facts,
.token-claim-box[data-state="ready"] .token-claim-facts,
.token-claim-box[data-state="no-id"] .token-claim-facts,
.token-claim-box[data-state="other-owner"] .token-claim-facts,
.token-claim-box[data-state="unknown-id"] .token-claim-facts,
.token-claim-box[data-state="already-claimed"] .token-claim-facts,
.token-claim-box[data-state="closed"] .token-claim-facts,
.token-claim-box[data-state="signing"] .token-claim-facts,
.token-claim-box[data-state="pending"] .token-claim-facts,
.token-claim-box[data-state="confirmed"] .token-claim-facts,
.token-claim-box[data-state="failed"] .token-claim-facts {
  display: grid;
}

.token-claim-box[data-state="ready"] .token-claim-when-ready {
  display: flex;
}

.token-claim-box[data-state="pending"] .token-claim-when-sent,
.token-claim-box[data-state="confirmed"] .token-claim-when-sent,
.token-claim-box[data-state="failed"] .token-claim-when-sent {
  display: grid;
  gap: 0.5rem;
}

.token-claim-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.token-claim-status[data-tone="good"] { color: #8ef58a; }
.token-claim-status[data-tone="warn"] { color: var(--gold); }
.token-claim-status[data-tone="bad"]  { color: #ff8f8f; }

.token-claim-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.token-claim-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.token-claim-box input[type="text"] {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 3px solid #000;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

.token-claim-box input[type="text"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.token-claim-facts {
  margin: 0;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.35rem 0.8rem;
  align-items: baseline;
  font-size: 0.95rem;
}

.token-claim-facts dt {
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.token-claim-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.token-claim-box code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  word-break: break-all;
  color: var(--text);
}

.token-claim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

.token-claim-box[data-state] .token-claim-list:not(:empty) {
  display: grid;
}

.token-claim-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 3px solid #000;
  background: var(--panel);
  min-width: 0;
}

.token-claim-idmeta {
  font-size: 0.8rem;
  color: var(--muted, #b9b3a6);
  overflow-wrap: anywhere;
}

.token-claim-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #b9b3a6);
  overflow-wrap: anywhere;
}

.token-claim-result {
  padding-top: 0.4rem;
  border-top: 3px solid #000;
}

.token-claim-result a {
  color: var(--gold);
}

/* Off-screen, still focusable: the copy fallback for browsers without the
   clipboard API. Never uses an inline style. */
.token-copy-fallback {
  position: fixed;
  top: 0;
  left: -9999px;
}

@media (max-width: 420px) {
  .token-claim-box {
    padding: 0.75rem;
  }

  .token-claim-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .token-claim-facts dd {
    margin-bottom: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .token-bar-fill {
    animation: none;
  }
}