:root{
  color-scheme:dark;
  --teal:#075f57;
  --deep:#04332f;
  --ink:#021f1c;
  --marigold:#f2a900;
  --limestone:#efe6d2;
  --terracotta:#c4532d;
  --pink:#e0457b;
  --mute:#9fc2bb;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--teal);
  color:var(--limestone);
  font-family:var(--body);
  -webkit-text-size-adjust:100%;
}

.shell{
  height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* papel picado strip */
.picado{
  height:clamp(12px,2svh,20px);
  display:grid;
  grid-template-columns:repeat(24,1fr);
  gap:3px;
  padding-inline:clamp(8px,2vw,16px);
}
.picado i{
  display:block;
  clip-path:polygon(0 0,100% 0,100% 70%,85% 100%,70% 70%,50% 100%,30% 70%,15% 100%,0 70%);
}
.picado i:nth-child(4n+1){background:var(--marigold)}
.picado i:nth-child(4n+2){background:var(--limestone)}
.picado i:nth-child(4n+3){background:var(--terracotta)}
.picado i:nth-child(4n){background:var(--pink)}

/* header */
.header{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,16px);
  padding:clamp(6px,1.2svh,12px) clamp(12px,3vw,24px);
}
.header img{
  width:clamp(44px,8vw,64px);
  height:clamp(44px,8vw,64px);
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.title-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.title-row{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
h1{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  font-size:clamp(22px,4.4svh,34px);
  letter-spacing:.01em;
  line-height:1;
}
.ticker{
  font-family:var(--mono);
  font-weight:600;
  color:var(--marigold);
  font-size:clamp(12px,1.6svh,16px);
}
.tagline{margin:0;color:var(--mute);font-size:clamp(11px,1.3svh,13px)}
.status-note{
  margin-left:auto;
  color:var(--mute);
  font-size:clamp(11px,1.3svh,13px);
  white-space:nowrap;
  text-align:right;
}
@media (max-width:600px){
  .status-note{display:none}
}

/* hero */
.hero{position:relative;min-height:0;overflow:hidden}
.hero picture{display:block;width:100%;height:100%}
.hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
}

/* coin panel */
.panel{
  background:var(--ink);
  border-top:3px solid var(--marigold);
  height:clamp(72px,14svh,120px);
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,32px);
  padding:0 clamp(12px,3vw,24px);
  overflow:hidden;
}
.panel-brand{display:flex;flex-direction:column;gap:2px;flex:none}
.brand-ticker{font-family:var(--mono);font-weight:600;color:var(--limestone);font-size:clamp(13px,1.8svh,16px)}
.brand-status{font-family:var(--mono);color:var(--mute);font-size:clamp(10px,1.3svh,12px)}
.panel-body{flex:1;min-width:0}
.state{display:none}
.panel[data-state="loading"] .state-loading{display:block}
.panel[data-state="soon"] .state-soon{display:block}
.panel[data-state="live"] .state-live{display:block}
.panel[data-state="error"] .state-error{display:block}

/* loading skeleton */
.skeleton-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(6px,1.5vw,20px);
}
.skel-item{display:flex;flex-direction:column;gap:6px}
.skel-label,.skel-value{background:var(--deep);height:.6em;width:60%}
.skel-value{height:1.05em;width:82%}
@media (prefers-reduced-motion:no-preference){
  .skel-label,.skel-value{animation:skelPulse 1.6s ease-in-out infinite}
}
@keyframes skelPulse{0%,100%{opacity:.35}50%{opacity:.7}}
@media (max-width:600px){
  .skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skeleton-grid .skel-item:nth-child(3),
  .skeleton-grid .skel-item:nth-child(4){display:none}
}

/* soon */
.soon-line{margin:0 0 4px;color:var(--limestone);font-size:clamp(12px,1.6svh,15px)}
.soon-sub{margin:0;color:var(--mute);font-size:clamp(11px,1.4svh,13px)}

/* live */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(6px,1.5vw,20px);
}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-label{
  font-family:var(--mono);
  font-size:clamp(9px,1.1svh,11px);
  letter-spacing:.08em;
  color:var(--mute);
}
.stat-value{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(13px,1.9svh,18px);
  font-weight:600;
  color:var(--limestone);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stat-change .stat-value.positive{color:var(--marigold)}
.stat-change .stat-value.negative{color:var(--terracotta)}
.nopool{margin:0;color:var(--mute);font-family:var(--mono);font-size:clamp(12px,1.6svh,15px)}
.live-actions{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,20px);
  margin-top:clamp(6px,1.2svh,10px);
}
.buy-link{
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(11px,1.4svh,13px);
  color:var(--limestone);
  border:1px solid var(--limestone);
  padding:5px 12px;
  text-decoration:none;
  white-space:nowrap;
}
.updated-line{
  font-family:var(--mono);
  color:var(--mute);
  font-size:clamp(10px,1.3svh,12px);
  white-space:nowrap;
}
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-mcap,.stat-liq{display:none}
  .live-actions{flex-wrap:wrap;gap:8px 16px}
}

/* error */
.error-line{margin:0 0 6px;color:var(--limestone);font-size:clamp(12px,1.6svh,15px)}
.retry-btn{
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(11px,1.4svh,13px);
  color:var(--limestone);
  background:none;
  border:1px solid var(--limestone);
  padding:5px 14px;
  cursor:pointer;
}

/* stale override: placed last so it wins the specificity tie */
.panel[data-stale="true"] .state-live .stat-value{color:var(--mute)}

/* runtime error toast */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(clamp(72px,14svh,120px) + 10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:var(--deep);
  color:var(--mute);
  font-size:clamp(11px,1.4svh,13px);
  padding:8px 14px;
  border:1px solid var(--mute);
  max-width:88vw;
  text-align:center;
  z-index:10;
}
.toast[hidden]{display:none}