/* ============================
   THE ZOODEX — Pixel Art Edition
   Inspired by $ZOODEX pixel scene
   ============================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Pixel palette from the image */
  --sky-top:     #5ba3e0;
  --sky-bot:     #8ecae6;
  --grass-bright:#5cb85c;
  --grass-dark:  #3d8b37;
  --dirt:        #8b5e3c;
  --wood-brown:  #7a4f2b;
  --wood-light:  #c68642;
  --wood-sign:   #d4a96a;
  --leaf-bright: #4caf50;
  --leaf-dark:   #2e7d32;
  --cream:       #f5e9c8;
  --parchment:   #ede0c4;
  --pixel-black: #1a1008;
  --pixel-white: #fff8e7;
  --orange:      #e07820;
  --red-acc:     #c0392b;
  --blue-acc:    #2980b9;
  --yellow:      #f4d03f;
  --teal:        #1abc9c;

  --px-border: 4px solid var(--pixel-black);
  --px-shadow: 4px 4px 0 var(--pixel-black);
  --px-shadow-lg: 6px 6px 0 var(--pixel-black);

  --font-pixel: 'Press Start 2P', monospace;
  --font-big:   'VT323', monospace;
}

/* ── PIXEL IMAGE RENDERING ── */
img, canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

html { scroll-behavior: smooth; }

/* ── BODY — Sky + Background Image ── */
body {
  font-family: var(--font-pixel);
  background-color: var(--sky-top);
  background-image: url('bg.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--pixel-black);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  /* pixel grid overlay */
  image-rendering: pixelated;
}

/* ── PIXEL SCANLINE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--grass-dark); }
::-webkit-scrollbar-thumb { background: var(--wood-brown); border: 2px solid var(--pixel-black); }

/* ── FLOATING BG ANIMALS ── */
.bg-animals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-animal {
  position: absolute;
  font-size: clamp(2rem, 4vw, 3rem);
  opacity: 0.18;
  animation: floatAnimal linear infinite;
  user-select: none;
  filter: grayscale(0.2);
}

.bg-animal.a1  { left: 5%;  animation-duration: 22s; animation-delay: 0s;    font-size: 3rem; }
.bg-animal.a2  { left: 15%; animation-duration: 28s; animation-delay: -5s;   font-size: 3.5rem; }
.bg-animal.a3  { left: 30%; animation-duration: 19s; animation-delay: -2s;   font-size: 2.5rem; }
.bg-animal.a4  { left: 45%; animation-duration: 24s; animation-delay: -8s;   font-size: 3rem; }
.bg-animal.a5  { left: 60%; animation-duration: 31s; animation-delay: -3s;   font-size: 2.8rem; }
.bg-animal.a6  { left: 72%; animation-duration: 20s; animation-delay: -10s;  font-size: 2.5rem; }
.bg-animal.a7  { left: 82%; animation-duration: 26s; animation-delay: -6s;   font-size: 3rem; }
.bg-animal.a8  { left: 90%; animation-duration: 33s; animation-delay: -1s;   font-size: 2rem; }
.bg-animal.a9  { left: 25%; animation-duration: 17s; animation-delay: -14s;  font-size: 2.2rem; }
.bg-animal.a10 { left: 55%; animation-duration: 29s; animation-delay: -9s;   font-size: 3.2rem; }

@keyframes floatAnimal {
  0%   { transform: translateY(110vh) rotate(-10deg); }
  100% { transform: translateY(-10vh) rotate(10deg); }
}

/* ── GROUND STRIP ── */
.ground-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--grass-bright);
  border-top: var(--px-border);
  box-shadow: 0 -4px 0 var(--grass-dark), inset 0 4px 0 rgba(255,255,255,0.15);
  overflow: hidden;
  z-index: 100;
  display: flex;
  align-items: center;
}

.ground-strip::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 16px;
  background: var(--grass-dark);
  border-top: 2px solid rgba(0,0,0,0.3);
}

.ground-walker {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: walkAcross 18s linear infinite;
  font-size: 1.6rem;
  position: relative;
  z-index: 1;
}

@keyframes walkAcross {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-200%); }
}

/* ── WOODEN SIGN HERO ── */
.hero {
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.hero-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Wooden arch sign (like the $ZOODEX sign in image) */
.logo-sign {
  display: inline-block;
  position: relative;
  margin-bottom: 2rem;
  animation: signSway 4s ease-in-out infinite;
  transform-origin: center top;
}

@keyframes signSway {
  0%,100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

.sign-board {
  background: var(--wood-sign);
  border: 5px solid var(--wood-brown);
  border-radius: 8px;
  padding: 1rem 2.5rem;
  position: relative;
  box-shadow: 
    6px 6px 0 var(--pixel-black),
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -2px 0 rgba(0,0,0,0.2);
}

/* Nail decorations (top corners) */
.sign-board::before,
.sign-board::after {
  content: '✕';
  position: absolute;
  font-size: 1.2rem;
  color: var(--wood-brown);
  font-family: var(--font-pixel);
  top: 4px;
  font-size: 0.7rem;
}
.sign-board::before { left: 8px; }
.sign-board::after  { right: 8px; }

/* Rope lines from sign */
.sign-rope-left,
.sign-rope-right {
  position: absolute;
  top: -30px;
  width: 4px;
  height: 34px;
  background: var(--wood-brown);
  border-radius: 2px;
}
.sign-rope-left  { left: 20%; }
.sign-rope-right { right: 20%; }

.logo-sign-text {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: var(--pixel-black);
  text-shadow: 
    2px 2px 0 rgba(0,0,0,0.2),
    -1px -1px 0 rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo-ticker {
  font-size: clamp(0.55rem, 1.5vw, 0.85rem);
  color: var(--wood-brown);
  display: block;
  margin-top: 0.3rem;
  letter-spacing: 0.12em;
}

.hero-tagline {
  font-family: var(--font-big);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--pixel-white);
  max-width: 640px;
  margin: 0 auto 2rem;
  line-height: 1.5;
  text-shadow: 2px 2px 0 var(--pixel-black);
}

.hero-tagline strong {
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--pixel-black);
}

/* ── HERO STATS ── */
.hero-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.stat-card {
  background: var(--parchment);
  border: var(--px-border);
  border-radius: 4px;
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 120px;
  transition: transform 0.1s;
  box-shadow: var(--px-shadow);
  cursor: default;
  position: relative;
}

/* Pixel corner decorations */
.stat-card::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  pointer-events: none;
}

.stat-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--px-shadow-lg);
}

.stat-num {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--orange);
  text-shadow: 2px 2px 0 var(--pixel-black);
}

.stat-label {
  font-family: var(--font-big);
  font-size: 1rem;
  color: var(--wood-brown);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── MAIN ── */
main {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── PIXEL WOOD PANEL (sections) ── */
.section {
  background: var(--parchment);
  border: var(--px-border);
  border-radius: 4px;
  padding: 2rem;
  position: relative;
  box-shadow: var(--px-shadow-lg);
  animation: fadeUp 0.5s ease both;
  /* Inner pixel border inset */
  outline: 2px solid rgba(0,0,0,0.06);
  outline-offset: -8px;
}

/* Wood grain top strip */
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 20px,
    transparent 20px, transparent 24px
  );
  border-bottom: 2px solid rgba(0,0,0,0.12);
  border-radius: 4px 4px 0 0;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SECTION HEADER (wooden plank) ── */
.section-header {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--wood-brown);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--px-shadow);
}

.section-emoji {
  font-size: 1.4rem;
}

.section-header h2 {
  font-family: var(--font-pixel);
  font-size: clamp(0.6rem, 1.5vw, 0.9rem);
  color: var(--pixel-white);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.04em;
}

.section-sub {
  font-family: var(--font-big);
  color: var(--wood-brown);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

/* ── TIMER SECTION ── */
.timer-section {
  background: var(--cream);
  border-color: var(--wood-brown);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}

.timer-cage {
  position: relative;
  background: var(--pixel-white);
  border: var(--px-border);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.04);
}

/* Cage bars */
.cage-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  gap: 14%;
  z-index: 2;
  opacity: 0.12;
  border-radius: 4px;
  overflow: hidden;
}

.cage-bars span {
  flex: 0 0 10px;
  background: var(--wood-brown);
  height: 100%;
}

.timer-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 1.2rem 0 1rem;
  position: relative;
  z-index: 1;
}

.timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.8rem 1.2rem;
  min-width: 110px;
  box-shadow: var(--px-shadow);
}

.timer-num {
  font-family: var(--font-pixel);
  font-size: clamp(2.5rem, 6vw, 3.8rem);
  color: var(--yellow);
  line-height: 1;
  text-shadow: 0 0 20px rgba(244,208,63,0.5);
  animation: timerBounce 1s ease-in-out infinite alternate;
}

@keyframes timerBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* LCD pixel glow effect on timer nums */
.timer-num::after {
  content: '';
  position: absolute;
}

.timer-unit {
  font-family: var(--font-big);
  font-size: 0.9rem;
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 4px;
}

.timer-colon {
  font-family: var(--font-pixel);
  font-size: 3rem;
  color: var(--yellow);
  line-height: 1;
  text-shadow: 0 0 10px rgba(244,208,63,0.4);
  animation: colonBlink 1s step-end infinite;
  margin-top: -0.5rem;
}

@keyframes colonBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.1; }
}

.timer-next-animal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-big);
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}

.next-label { color: var(--wood-brown); }

.next-token {
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: var(--pixel-black);
  background: var(--yellow);
  border: var(--px-border);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  box-shadow: var(--px-shadow);
}

.timer-progress-bar {
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  height: 20px;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.timer-progress-fill {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--grass-bright) 0px,
    var(--grass-bright) 12px,
    var(--grass-dark) 12px,
    var(--grass-dark) 16px
  );
  transition: width 1s linear;
}

.timer-desc {
  font-family: var(--font-big);
  color: var(--wood-brown);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ── WHEEL ── */
.wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #c0392b 0deg 45deg,
    #e67e22 45deg 90deg,
    #f1c40f 90deg 135deg,
    #2ecc71 135deg 180deg,
    #1abc9c 180deg 225deg,
    #3498db 225deg 270deg,
    #9b59b6 270deg 315deg,
    #e91e63 315deg 360deg
  );
  border: var(--px-border);
  box-shadow: var(--px-shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease;
  image-rendering: pixelated;
}

.wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 10px solid rgba(255,255,255,0.25);
  pointer-events: none;
}

/* Pixel crosshair center */
.wheel::before {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 1.2rem;
  color: white;
  text-shadow: 1px 1px 0 var(--pixel-black);
}

.wheel-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  position: absolute;
  width: 50%;
  height: 50%;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
}

.wheel-segment.s1 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(22deg); }
.wheel-segment.s2 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(67deg); }
.wheel-segment.s3 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(112deg); }
.wheel-segment.s4 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(157deg); }
.wheel-segment.s5 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(202deg); }
.wheel-segment.s6 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(247deg); }
.wheel-segment.s7 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(292deg); }
.wheel-segment.s8 { top: 5%;  left: 50%; transform-origin: left bottom; transform: rotate(337deg); }

.wheel-pointer {
  font-size: 2.2rem;
  color: var(--pixel-black);
  margin-top: -0.6rem;
  z-index: 2;
  animation: pointerBounce 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(2px 2px 0 var(--orange));
}

@keyframes pointerBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

.spin-btn {
  background: var(--wood-sign);
  color: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  box-shadow: var(--px-shadow);
  text-shadow: none;
  letter-spacing: 0.04em;
}

.spin-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--px-shadow-lg); }
.spin-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--pixel-black); }
.spin-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--px-shadow); }

/* ── AIRDROP GRID ── */
.airdrop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1.2rem;
}

.airdrop-card {
  background: var(--pixel-white);
  border: var(--px-border);
  border-radius: 4px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  box-shadow: var(--px-shadow);
  cursor: default;
}

.airdrop-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--px-shadow-lg);
}

.airdrop-card .ac-emoji {
  font-size: 3rem;
  animation: emojiHop 2s steps(2) infinite;
  display: block;
}

@keyframes emojiHop {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.airdrop-card .ac-name {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--pixel-black);
  line-height: 1.5;
}

.airdrop-card .ac-ticker {
  font-family: var(--font-big);
  font-size: 0.95rem;
  color: var(--wood-brown);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.airdrop-card .ac-amount {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--pixel-black);
  background: var(--yellow);
  padding: 3px 8px;
  border-radius: 2px;
  border: 2px solid var(--pixel-black);
  box-shadow: 2px 2px 0 var(--pixel-black);
}

.airdrop-card .ac-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--pixel-black);
  color: var(--yellow);
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  letter-spacing: 0.04em;
}

/* ── TABLE SHARED ── */
.table-wrapper {
  overflow-x: auto;
  border-radius: 4px;
  border: var(--px-border);
  background: var(--pixel-white);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5);
}

/* Scrollable table — thead sticky, body max 6 rows (~360px) */
.table-scroll-6 {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto;
}
.table-scroll-6 thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wood-brown);
}

/* Scrollable history list — max 6 cards */
.history-scroll-6 {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

thead tr {
  background: var(--wood-brown);
  border-bottom: var(--px-border);
}

th {
  padding: 0.9rem 1rem;
  text-align: left;
  color: var(--pixel-white);
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

td {
  padding: 0.85rem 1rem;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  white-space: nowrap;
  color: var(--pixel-black);
  font-family: var(--font-big);
  font-size: 1.05rem;
  font-weight: 600;
}

tbody tr {
  transition: background 0.1s;
}

tbody tr:hover {
  background: rgba(122,79,43,0.07);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* even rows get subtle stripe */
tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.025);
}

/* ── TX TABLE SPECIFIC ── */
.tx-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  border: 2px solid var(--pixel-black);
  box-shadow: 2px 2px 0 var(--pixel-black);
  letter-spacing: 0.04em;
}

.tx-type.claim   { background: var(--yellow);       color: var(--pixel-black); }
.tx-type.buy     { background: #e07820;              color: var(--pixel-white); }
.tx-type.airdrop { background: var(--grass-bright);  color: var(--pixel-black); }

.tx-hash {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--blue-acc);
  text-decoration: underline;
  font-weight: 800;
}

.tx-hash:hover { color: var(--orange); }

/* ── HOLDERS TABLE ── */
.holders-search {
  margin-bottom: 1.2rem;
}

.holders-search input {
  width: 100%;
  background: var(--pixel-white);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  color: var(--pixel-black);
  font-family: var(--font-big);
  font-size: 1.1rem;
  font-weight: 700;
  outline: none;
  transition: box-shadow 0.1s;
  box-shadow: var(--px-shadow);
}

.holders-search input:focus {
  box-shadow: var(--px-shadow-lg);
  background: #fffef5;
}

.holders-search input::placeholder { 
  color: #aaa;
  font-family: var(--font-big);
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  text-align: center;
  font-family: var(--font-pixel);
  font-weight: 900;
  font-size: 0.5rem;
  border: 2px solid var(--pixel-black);
  box-shadow: 2px 2px 0 var(--pixel-black);
}

.rank-badge.r1 { background: var(--yellow);    color: var(--pixel-black); }
.rank-badge.r2 { background: #c0c0c0;          color: var(--pixel-black); }
.rank-badge.r3 { background: #cd7f32;          color: var(--pixel-white); }
.rank-badge.rn { background: var(--parchment); color: var(--pixel-black); }

.holder-wallet {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--pixel-black);
  font-weight: 800;
}

.holder-share { color: var(--orange); font-weight: 900; }
.holder-airdrops { color: var(--grass-bright); font-weight: 900; }

.holder-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  font-weight: 900;
}

.holder-status.active { color: var(--grass-bright); }
.holder-status.active::before { 
  content: ''; 
  width: 8px; 
  height: 8px; 
  background: var(--grass-bright); 
  display: inline-block;
  border: 2px solid var(--pixel-black);
  animation: statusPulse 1.5s steps(2) infinite; 
}

@keyframes statusPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ── FOOTER ── */
.zoo-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2.5rem 1rem 5rem;
  border-top: var(--px-border);
  background: var(--grass-dark);
  color: var(--pixel-white);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  line-height: 2;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  box-shadow: 0 -4px 0 var(--pixel-black);
}

.footer-animals {
  font-size: 2rem;
  letter-spacing: 0.4rem;
  margin-bottom: 1rem;
  animation: footerHop 1.5s steps(2) infinite alternate;
  display: block;
}

/* Token image parade in footer */
.footer-token-parade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  min-height: 48px;
  animation: footerHop 1.5s steps(2) infinite alternate;
}

.footer-token-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 2px solid var(--pixel-black);
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  transition: transform 0.1s;
}
.footer-token-img:hover { transform: translateY(-4px); }

.footer-token-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--yellow);
  border: 2px solid var(--pixel-black);
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  color: var(--pixel-black);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

@keyframes footerHop {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.footer-sub {
  font-family: var(--font-big);
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.5rem;
}

/* ── CONFETTI ── */
.confetti-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 0; /* square pixels */
  border: 2px solid rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall 1.5s steps(10) forwards;
  image-rendering: pixelated;
}

@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* ── PIXEL BUTTON STYLE (shared) ── */
.px-btn {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  background: var(--wood-sign);
  color: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.6rem 1rem;
  box-shadow: var(--px-shadow);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  letter-spacing: 0.04em;
}

.px-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--px-shadow-lg); }
.px-btn:active { transform: translate(2px, 2px); box-shadow: none; }

/* ── TOOLTIP PIXEL STYLE ── */
[title] { cursor: help; }

/* ── SCROLLBAR STYLING ── */
* { scrollbar-width: thin; scrollbar-color: var(--wood-brown) var(--parchment); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .timer-section {
    grid-template-columns: 1fr;
  }

  .wheel-container {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-stats {
    gap: 0.6rem;
  }

  .stat-card {
    min-width: 100px;
    padding: 0.8rem 1rem;
  }

  th { font-size: 0.35rem; }
  td { font-size: 0.9rem; }

  .section { padding: 1.2rem; }
  main { padding: 0 0.8rem 5rem; gap: 1.5rem; }
}

@media (max-width: 480px) {
  .logo-sign-text { font-size: 0.75rem; }
  .timer-num { font-size: 2.5rem; }
  .timer-block { min-width: 80px; }
  .airdrop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PIXEL TREE DECO (CSS trees in corners) ── */
.pixel-tree {
  position: fixed;
  bottom: 56px;
  z-index: 1;
  font-size: 4rem;
  pointer-events: none;
  animation: treeSway 6s ease-in-out infinite;
  transform-origin: bottom center;
  filter: drop-shadow(3px 0 0 rgba(0,0,0,0.2));
}

.pixel-tree.left  { left: 8px; }
.pixel-tree.right { right: 8px; animation-delay: -2s; }
.pixel-tree.left2  { left: 60px; font-size: 3rem; animation-delay: -1s; }
.pixel-tree.right2 { right: 60px; font-size: 3rem; animation-delay: -3s; }

@keyframes treeSway {
  0%,100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ── FLASHING "NEW" BADGE ── */
.badge-new {
  display: inline-block;
  background: var(--red-acc);
  color: white;
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  padding: 2px 5px;
  border-radius: 2px;
  border: 2px solid var(--pixel-black);
  animation: flashBadge 1s steps(2) infinite;
  vertical-align: middle;
  margin-left: 4px;
}

@keyframes flashBadge {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

/* ═══════════════════════════════════════════════
   WEBSOCKET / LIVE DATA UI STYLES
   ═══════════════════════════════════════════════ */

/* ── CONNECTION STATUS BADGE ── */
.conn-badge {
  position: fixed;
  top: 12px; right: 14px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  padding: 5px 10px;
  border: 2px solid var(--pixel-black);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--pixel-black);
  letter-spacing: 0.04em;
  transition: background 0.3s;
  cursor: default;
  user-select: none;
}
.conn-dot {
  width: 8px; height: 8px;
  border-radius: 0;
  border: 2px solid var(--pixel-black);
  display: inline-block;
  flex-shrink: 0;
}
.conn-badge.connecting   { background: var(--yellow);       color: var(--pixel-black); }
.conn-badge.connecting   .conn-dot { background: var(--orange); animation: flashBadge 0.7s steps(2) infinite; }
.conn-badge.live         { background: var(--grass-bright); color: var(--pixel-black); }
.conn-badge.live         .conn-dot { background: #1a5c1a;   animation: statusPulse 1.5s steps(2) infinite; }
.conn-badge.reconnecting { background: var(--orange);       color: var(--pixel-white); }
.conn-badge.reconnecting .conn-dot { background: #fff8e7;   animation: flashBadge 0.4s steps(2) infinite; }

/* ── CONTRACT ADDRESS BOX ── */
.ca-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  margin: 0.8rem auto 1.6rem;
  max-width: 640px;
  box-shadow: var(--px-shadow);
  flex-wrap: wrap;
  justify-content: center;
}
.ca-label {
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: var(--yellow);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.ca-addr {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: #a8e6cf;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.ca-copy-btn {
  background: var(--wood-sign);
  color: var(--pixel-black);
  border: 2px solid var(--pixel-black);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--pixel-black);
  transition: transform 0.08s, box-shadow 0.08s;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.ca-copy-btn:hover  { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--pixel-black); }
.ca-copy-btn:active { transform: translate(1px,1px); box-shadow: none; }
.ca-copy-btn.copied { background: var(--grass-bright); }

/* ── SCHEDULER STATUS BANNER ── */
.scheduler-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: var(--wood-brown);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--px-shadow);
  font-family: var(--font-big);
  font-size: 1.1rem;
  color: var(--pixel-white);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.scheduler-banner .sched-dot {
  width: 10px; height: 10px;
  border-radius: 0;
  border: 2px solid var(--pixel-black);
  background: var(--grass-bright);
  flex-shrink: 0;
  animation: statusPulse 1.5s steps(2) infinite;
}
.scheduler-banner.paused .sched-dot { background: var(--orange); animation: flashBadge 1s steps(2) infinite; }

/* ── PHASE INDICATOR ── */
.phase-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--px-shadow);
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: var(--yellow);
  letter-spacing: 0.04em;
}
.phase-bar .phase-dot {
  width: 8px; height: 8px;
  background: var(--grass-bright);
  border: 2px solid var(--pixel-black);
  animation: flashBadge 0.6s steps(2) infinite;
  flex-shrink: 0;
}

/* ── TOKEN ICON ── */
.token-icon {
  width: 32px; height: 32px;
  border-radius: 2px;
  border: 2px solid var(--pixel-black);
  object-fit: cover;
  image-rendering: pixelated;
  vertical-align: middle;
}
.token-icon-sm {
  width: 24px; height: 24px;
  border-radius: 2px;
  border: 2px solid var(--pixel-black);
  object-fit: cover;
  image-rendering: pixelated;
  vertical-align: middle;
}
.token-symbol-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--yellow);
  border: 2px solid var(--pixel-black);
  border-radius: 2px;
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  color: var(--pixel-black);
  font-weight: 700;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── DISTRIBUTION OVERLAY ── */
.dist-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: rgba(10,6,2,0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(2px);
}
.dist-overlay.visible { opacity: 1; pointer-events: all; }

.dist-panel {
  background: var(--parchment);
  border: var(--px-border);
  border-radius: 4px;
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 440px;
  width: 90%;
  box-shadow: var(--px-shadow-lg);
  position: relative;
  overflow: hidden;
}
.dist-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg,rgba(255,255,255,0.2) 0px,rgba(255,255,255,0.2) 18px,transparent 18px,transparent 22px);
  border-bottom: 2px solid rgba(0,0,0,0.12);
}
.dist-title {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  color: var(--pixel-black);
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
  margin-top: 0.5rem;
}
.dist-wheel-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.dist-wheel {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    #c0392b 0deg 45deg,#e67e22 45deg 90deg,#f1c40f 90deg 135deg,
    #2ecc71 135deg 180deg,#1abc9c 180deg 225deg,#3498db 225deg 270deg,
    #9b59b6 270deg 315deg,#e91e63 315deg 360deg
  );
  border: var(--px-border);
  box-shadow: var(--px-shadow-lg);
  position: relative;
  overflow: hidden;
}
.dist-wheel-pointer {
  font-size: 1.8rem;
  color: var(--pixel-black);
  margin-top: -0.4rem;
  filter: drop-shadow(2px 2px 0 var(--orange));
  animation: pointerBounce 0.5s ease-in-out infinite alternate;
}
.dist-token-reveal {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.6rem 1.2rem;
  box-shadow: var(--px-shadow);
  margin: 0 auto;
  width: fit-content;
  min-height: 56px;
  justify-content: center;
}
.dist-token-name { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--yellow); letter-spacing: 0.04em; }
.dist-token-sym  { font-family: var(--font-big); font-size: 1rem; color: #a8e6cf; }
.dist-phase {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--wood-brown);
  margin-top: 0.6rem;
  letter-spacing: 0.04em;
  min-height: 1.2em;
}
.dist-progress-wrap { width: 100%; margin-top: 0.8rem; }
.dist-progress-bar {
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}
.dist-progress-fill {
  height: 100%;
  background: repeating-linear-gradient(90deg,var(--grass-bright) 0px,var(--grass-bright) 10px,var(--grass-dark) 10px,var(--grass-dark) 14px);
  transition: width 0.5s linear;
  width: 0%;
}
.dist-progress-label { font-family: var(--font-big); font-size: 0.95rem; color: var(--wood-brown); margin-top: 4px; }

/* ── LIVE TRANSFERS FEED ── */
.live-feed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.live-feed-empty { font-family: var(--font-big); color: var(--wood-brown); font-size: 1rem; text-align: center; padding: 1rem; }
.feed-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--pixel-white);
  border: 2px solid var(--pixel-black);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  box-shadow: 2px 2px 0 var(--pixel-black);
  animation: feedSlideIn 0.25s ease both;
  flex-wrap: wrap;
}
@keyframes feedSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feed-row .feed-wallet { font-family: 'Courier New',monospace; font-size: 0.78rem; color: var(--blue-acc); flex: 1; min-width: 80px; font-weight: 800; }
.feed-row .feed-amount { font-family: var(--font-pixel); font-size: 0.42rem; color: var(--pixel-black); background: var(--yellow); border: 2px solid var(--pixel-black); border-radius: 2px; padding: 2px 6px; box-shadow: 1px 1px 0 var(--pixel-black); white-space: nowrap; }
.feed-row .feed-status { font-family: var(--font-pixel); font-size: 0.38rem; padding: 2px 5px; border-radius: 2px; border: 2px solid var(--pixel-black); }
.feed-row .feed-status.success   { background: var(--grass-bright); color: var(--pixel-black); }
.feed-row .feed-status.pending   { background: var(--yellow); color: var(--pixel-black); animation: flashBadge 0.8s steps(2) infinite; }
.feed-row .feed-status.failed    { background: var(--red-acc); color: var(--pixel-white); }
.feed-row .feed-status.confirmed { background: var(--teal); color: var(--pixel-black); }
.feed-row .feed-status.skipped   { background: #aaa; color: var(--pixel-black); }
.feed-tx-link { font-family: var(--font-pixel); font-size: 0.35rem; color: var(--blue-acc); text-decoration: underline; flex-shrink: 0; }

/* ── CONFIGURED TOKENS GRID ── */
.config-tokens-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.config-token-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--pixel-white);
  border: 2px solid var(--pixel-black);
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 2px 2px 0 var(--pixel-black);
  font-family: var(--font-big);
  font-size: 1rem;
  color: var(--pixel-black);
}

/* ── HISTORY CARD ── */
.history-list { display: flex; flex-direction: column; gap: 0.7rem; }
.history-card {
  background: var(--pixel-white);
  border: 2px solid var(--pixel-black);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  box-shadow: 2px 2px 0 var(--pixel-black);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-family: var(--font-big);
  font-size: 1rem;
  transition: transform 0.1s;
}
.history-card:hover { transform: translate(-1px,-1px); }
.history-card .hc-round { font-family: var(--font-pixel); font-size: 0.42rem; color: var(--wood-brown); flex-shrink: 0; }
.history-card .hc-status { font-family: var(--font-pixel); font-size: 0.38rem; padding: 2px 6px; border: 2px solid var(--pixel-black); border-radius: 2px; box-shadow: 1px 1px 0 var(--pixel-black); flex-shrink: 0; }
.hc-status.success { background: var(--grass-bright); color: var(--pixel-black); }
.hc-status.failed, .hc-status.swap_failed { background: var(--red-acc); color: var(--pixel-white); }
.hc-status.skipped_no_holders, .hc-status.skipped_low_balance { background: var(--orange); color: var(--pixel-white); }
.history-card .hc-info { flex: 1; min-width: 100px; color: var(--pixel-black); }
.history-card .hc-meta { color: var(--wood-brown); font-size: 0.9rem; }
.history-card .hc-time { font-size: 0.85rem; color: #888; margin-left: auto; flex-shrink: 0; }

/* ── BALANCE DISPLAY ── */
.balance-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--pixel-black);
  border: var(--px-border);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  box-shadow: var(--px-shadow);
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: var(--yellow);
  letter-spacing: 0.04em;
}
.balance-chip span { color: var(--pixel-white); }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 2rem; font-family: var(--font-big); color: var(--wood-brown); font-size: 1.1rem; }

/* ══════════════════════════════════════════
   NEW: WHEEL SEGMENT TOKEN IMAGES
   ══════════════════════════════════════════ */
.wheel-segment img {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 2px solid rgba(0,0,0,0.3);
  object-fit: cover;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}
.wheel-segment .seg-fallback {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--pixel-white);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  padding: 2px 4px;
}

/* Overlay dist-wheel img segments */
.dist-wheel .wheel-segment img {
  width: 28px;
  height: 28px;
}

/* ══════════════════════════════════════════
   NEW: GROUND WALKER TOKEN IMAGES
   ══════════════════════════════════════════ */
.ground-walker img {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border: 2px solid var(--pixel-black);
  object-fit: cover;
  image-rendering: pixelated;
  vertical-align: middle;
  flex-shrink: 0;
}
.ground-walker .gw-fallback {
  font-size: 1.6rem;
  display: inline-block;
  vertical-align: middle;
}

/* ══════════════════════════════════════════
   NEW: EXPANDABLE ROUND HISTORY CARDS
   ══════════════════════════════════════════ */
.history-card {
  cursor: pointer;
  user-select: none;
}
.history-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.hc-expand-icon {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--wood-brown);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.history-card.open .hc-expand-icon {
  transform: rotate(180deg);
}

/* Round transfers sub-list */
.hc-transfers {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 2px dashed rgba(0,0,0,0.12);
  width: 100%;
  animation: fadeUp 0.2s ease both;
}
.history-card.open .hc-transfers {
  display: flex;
}

.hc-transfer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.035);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  padding: 0.35rem 0.6rem;
  font-family: var(--font-big);
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.hc-transfer-wallet {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--blue-acc);
  font-weight: 800;
  flex: 1;
  min-width: 60px;
}
.hc-transfer-amount {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  background: var(--yellow);
  border: 2px solid var(--pixel-black);
  border-radius: 2px;
  padding: 1px 5px;
  box-shadow: 1px 1px 0 var(--pixel-black);
  white-space: nowrap;
}
.hc-transfer-status {
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  padding: 1px 4px;
  border: 2px solid var(--pixel-black);
  border-radius: 2px;
}
.hc-transfer-status.success   { background: var(--grass-bright); color: var(--pixel-black); }
.hc-transfer-status.failed    { background: var(--red-acc); color: var(--pixel-white); }
.hc-transfer-status.pending   { background: var(--yellow); color: var(--pixel-black); }
.hc-transfer-status.confirmed { background: var(--teal); color: var(--pixel-black); }
.hc-transfer-status.skipped   { background: #aaa; color: var(--pixel-black); }

.hc-transfer-link {
  font-family: var(--font-pixel);
  font-size: 0.32rem;
  color: var(--blue-acc);
  text-decoration: underline;
}