@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,500;6..12,700;6..12,800&family=Pixelify+Sans:wght@500;600;700&display=swap');

:root {
  --paper: #fffdf5;
  --sky: #a8dcf1;
  --grass: #75bd59;
  --green: #397d45;
  --dirt: #9a623d;
  --stone: #dad6c9;
  --ink: #20384a;
  --torch: #f4c443;
  --water: #4fadd0;
  --bg: var(--paper);
  --bg2: #edf4ea;
  --bg3: var(--paper);
  --bg4: #e1ecdf;
  --text: var(--ink);
  --dim: #547080;
  --muted: #6d8792;
  --border: rgba(32, 56, 74, .22);
  --border2: rgba(57, 125, 69, .5);
  --gold: var(--torch);
  --red: #c9573b;
  --glow: rgba(117, 189, 89, .2);
  --glow2: rgba(117, 189, 89, .1);
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: "Nunito Sans", "Trebuchet MS", sans-serif !important;
}
body::before { content: none !important; }
nav {
  position: relative !important;
  min-height: 5.25rem !important;
  height: auto !important;
  padding: .75rem max(18px, 5vw) !important;
  border-bottom: 4px solid var(--ink) !important;
  background: var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-logo { gap: .7rem !important; }
.nav-logo-icon {
  width: 1.7rem !important; height: 1.7rem !important; border-radius: 0 !important;
  border: 3px solid var(--ink) !important; background: var(--grass) !important;
  box-shadow: inset 0 -.4rem 0 var(--dirt) !important;
  color: transparent !important; font-size: 0 !important;
}
.nav-logo-text, .nav-logo-text span { color: var(--ink) !important; font-family: "Pixelify Sans", monospace !important; font-size: 1.5rem !important; }
.nav-back, .nav-link {
  border: 3px solid transparent !important; border-radius: 0 !important; color: var(--ink) !important;
  font-family: "Pixelify Sans", monospace !important; font-weight: 800 !important;
}
.nav-link {
  display: inline-grid !important; min-height: 2.75rem; place-items: center; padding: .35rem .55rem !important;
  border-color: var(--ink) !important; background: var(--paper) !important; box-shadow: 3px 3px 0 var(--ink) !important; text-align: center;
}
.nav-links .nav-link:last-child { background: var(--torch) !important; }
.nav-back:hover, .nav-link:hover { background: var(--sky) !important; border-color: var(--ink) !important; color: var(--ink) !important; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink) !important; }
.nav-links .nav-link:last-child:hover { background: #ffdc70 !important; }
.nav-links { gap: .25rem !important; }

main {
  max-width: 1180px !important;
  padding: 3.7rem max(20px, 5vw) 5rem !important;
}
.page-title, .shop-h {
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Pixelify Sans", monospace !important;
  font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
  letter-spacing: -.04em !important;
}
.page-title::before, .shop-h::before {
  content: "✦ "; color: var(--green); font-size: .55em; vertical-align: .1em;
}
.page-sub, .shop-sub { color: var(--dim) !important; font-weight: 700 !important; }

/* Signal station */
.cards {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: .85rem !important; margin: 2rem 0 2.5rem !important;
}
.card, .chart-section {
  border: 4px solid var(--ink) !important; border-radius: 0 !important;
  background: var(--paper) !important; box-shadow: 6px 6px 0 var(--ink) !important;
}
.card { min-height: 9.5rem; padding: 1.15rem !important; }
.card:nth-child(2n) { background: #e4f1b7 !important; }
.card:nth-child(3n) { background: #b8e3ee !important; }
.card-label, .section-title {
  color: var(--green) !important; font-family: "Pixelify Sans", monospace !important;
  font-size: .78rem !important; letter-spacing: .02em !important;
}
.card-val { color: var(--ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-family: "Pixelify Sans", monospace !important; }
.card-val.grey { -webkit-text-fill-color: var(--dim) !important; }
.card-sub, .chart-desc, .refresh-info, .uptime-labels { color: var(--dim) !important; font-weight: 700 !important; }
.chart-section { padding: clamp(1.1rem, 3vw, 2rem) !important; margin-bottom: 1.8rem !important; }
.chart-title { color: var(--ink) !important; font-family: "Pixelify Sans", monospace !important; font-size: 1.45rem !important; }
.chart-wrap { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); background: #e9f4ea; padding: .7rem 0; }
.refresh-btn, .btn, .tab-btn {
  border: 3px solid var(--ink) !important; border-radius: 0 !important; background: var(--torch) !important;
  color: var(--ink) !important; box-shadow: 3px 3px 0 var(--ink) !important; font-family: "Pixelify Sans", monospace !important;
}
.refresh-btn:hover, .btn:hover:not(:disabled), .tab-btn:hover { transform: translate(1px, 1px) !important; box-shadow: 2px 2px 0 var(--ink) !important; }
.uptime-grid { gap: 4px !important; }
.uptime-bar { border-radius: 0 !important; outline: 1px solid rgba(32,56,74,.18); }
footer { border-top: 4px solid var(--ink) !important; background: var(--dirt) !important; color: var(--paper) !important; font-weight: 800 !important; }

/* Outfitter's chest */
.shop-head {
  position: relative; max-width: 48rem; margin: 0 0 2.5rem !important; padding: 1.6rem 0 1.6rem 1.2rem;
  border-left: 8px solid var(--grass); text-align: left !important;
}
.shop-head::after { content: "COSMETICS · SHARDS ONLY"; display: block; margin-top: .7rem; color: var(--green); font-family: "Pixelify Sans", monospace; font-size: .8rem; }
.link-card, .account-bar, .pack-card, .cos-card, .rank-card {
  border: 4px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.link-card { max-width: 39rem !important; margin: 0 !important; padding: 1.5rem !important; background: #e4f1b7 !important; }
.link-card h2, .pack-name, .rank-name { font-family: "Pixelify Sans", monospace !important; }
.link-card code, .link-form input {
  border: 3px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper) !important;
  color: var(--ink) !important; font-family: "Pixelify Sans", monospace !important;
}
.account-bar { padding: 1rem !important; background: #b8e3ee !important; }
.balance-chip { border: 3px solid var(--ink) !important; border-radius: 0 !important; background: var(--torch) !important; color: var(--ink) !important; }
.section-title { margin: 2.8rem 0 1rem !important; font-size: 1rem !important; }
.section-title::before { content: "▣ "; color: var(--dirt); }
.tab-row { gap: .55rem !important; border-bottom: 3px solid var(--ink); padding-bottom: .75rem; }
.tab-btn.active { background: var(--grass) !important; }
.rank-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 1.1rem !important; }
.pack-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 1.1rem !important; }
.cos-grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)) !important; gap: 1rem !important; }
.rank-card, .pack-card, .cos-card { padding: 1rem !important; }
.rank-card:nth-child(3n+1), .cos-card:nth-child(4n+1) { background: #e4f1b7 !important; }
.rank-card:nth-child(3n+2), .cos-card:nth-child(4n+2) { background: #b8e3ee !important; }
.rank-card:nth-child(3n), .cos-card:nth-child(4n+3) { background: #ffe6a0 !important; }
.pack-card { background: #d8eabc !important; }
.pack-card::after { color: var(--dirt) !important; font-family: "Pixelify Sans", monospace !important; }
.cos-thumb-placeholder { border: 3px dashed var(--ink) !important; border-radius: 0 !important; background: var(--stone) !important; color: var(--ink) !important; }
.cos-owned { border: 3px solid var(--green) !important; border-radius: 0 !important; color: var(--green) !important; background: var(--paper) !important; font-family: "Pixelify Sans", monospace !important; }
.free-tag { border-radius: 0 !important; background: var(--torch) !important; color: var(--ink) !important; font-family: "Pixelify Sans", monospace !important; }
#toast { border: 4px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper) !important; color: var(--ink) !important; box-shadow: 6px 6px 0 var(--ink) !important; }

@media (max-width: 760px) {
  nav { min-height: 4.5rem !important; flex-wrap: wrap; padding: .55rem .75rem !important; }
  .nav-logo-text::after { display: none; }
  .nav-links { display: grid !important; width: 100%; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .35rem !important; max-width: none; overflow: visible; }
  .nav-link { display: grid !important; min-height: 2.75rem; place-items: center; padding: .35rem .2rem !important; border: 3px solid var(--ink) !important; box-shadow: 2px 2px 0 var(--ink) !important; white-space: nowrap; font-size: .65rem !important; text-align: center; }
  main { padding: 2.2rem .75rem 3.5rem !important; }
  .page-title, .shop-h { font-size: clamp(2.25rem, 12vw, 3.4rem) !important; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; }
  .card:last-child { grid-column: span 2; min-height: auto; }
  .card { min-height: 7.8rem; padding: .9rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
  .chart-section { box-shadow: 4px 4px 0 var(--ink) !important; }
  .chart-wrap { height: 205px !important; }
  .refresh-row { justify-content: flex-start !important; flex-wrap: wrap; }
  .shop-head { margin-bottom: 1.7rem !important; padding-left: .85rem; }
  .link-card, .account-bar, .pack-card, .cos-card, .rank-card { box-shadow: 4px 4px 0 var(--ink) !important; }
  .link-form { flex-direction: column; }
  .link-form .btn, .copy-address { min-height: 3.1rem; }
  .account-bar { align-items: flex-start !important; gap: .8rem; }
  .account-bar > div:last-child { flex-wrap: wrap; gap: .55rem !important; }
  .pack-grid, .rank-grid { grid-template-columns: 1fr !important; }
  .cos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
}

/* Jan's shared motion kit. Copy into a site (or @import) and apply classes. Subtle, one-shot, no looping pulses/glows.
   Utility classes: m-pop (floating buttons/popovers), m-rise (cards/messages/sections on load), m-fade, m-panel (+ m-closing) for slide-up panels/modals,
   m-stagger (parent: children rise in sequence), m-press (buttons/cards: hover lift + press squish), m-dots (typing/loading dots), m-skeleton (loading shimmer, finite use only). */
:root { --m-ease: cubic-bezier(.2,.8,.2,1); --m-spring: cubic-bezier(.2,.9,.3,1.2); }
@keyframes m-pop { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-panel-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes m-panel-out { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes m-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes m-shimmer { to { background-position: -200% 0; } }
.m-pop { animation: m-pop .18s var(--m-spring) both; }
.m-rise { animation: m-rise .4s var(--m-ease) both; }
.m-fade { animation: m-fade .3s ease-out both; }
.m-panel { animation: m-panel-in .26s var(--m-ease) both; }
.m-panel.m-closing { animation: m-panel-out .18s ease-in both; }
.m-stagger > * { animation: m-rise .4s var(--m-ease) both; }
.m-stagger > *:nth-child(1) { animation-delay: .00s; } .m-stagger > *:nth-child(2) { animation-delay: .05s; }
.m-stagger > *:nth-child(3) { animation-delay: .10s; } .m-stagger > *:nth-child(4) { animation-delay: .15s; }
.m-stagger > *:nth-child(5) { animation-delay: .20s; } .m-stagger > *:nth-child(6) { animation-delay: .25s; }
.m-stagger > *:nth-child(n+7) { animation-delay: .30s; }
.m-press { transition: transform .15s var(--m-ease), box-shadow .15s var(--m-ease); }
.m-press:hover { transform: translateY(-2px); } .m-press:active { transform: scale(.97); }
.m-dots span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 9999px; background: currentColor; opacity: .5; animation: m-dot 1s infinite; }
.m-dots span:nth-child(2) { animation-delay: .15s; } .m-dots span:nth-child(3) { animation-delay: .3s; }
.m-skeleton { background: linear-gradient(90deg, rgba(128,128,128,.12) 25%, rgba(128,128,128,.22) 50%, rgba(128,128,128,.12) 75%); background-size: 200% 100%; animation: m-shimmer 1.4s linear 6; }
@media (prefers-reduced-motion: reduce) { .m-pop, .m-rise, .m-fade, .m-panel, .m-stagger > *, .m-dots span, .m-skeleton { animation: none !important; } .m-press, .m-press:hover, .m-press:active { transition: none; transform: none; } }

/* Entrances release transforms after arrival; interactive motion uses compositing only. */
.m-rise, .m-pop, .m-fade, .m-panel, .m-stagger > * { animation-fill-mode: backwards; }
.m-press { transition-property: transform, opacity; }
@media (hover: none) { .m-press:hover { transform: none; } }

.nav-link, .nav-back, .btn, .tab-btn, .refresh-btn, .rank-card, .pack-card, .cos-card { transition: transform .15s var(--m-ease), opacity .15s var(--m-ease); }
@media (prefers-reduced-motion: reduce) {
  .nav-link, .nav-back, .btn, .tab-btn, .refresh-btn, .rank-card, .pack-card, .cos-card { transition: none !important; transform: none !important; }
}