body{background:var(--dark);color:var(--text);font-family:"Rajdhani",sans-serif;overflow:hidden;height:100vh}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}
a{color:var(--blue-bright);text-decoration:none;transition:color .2s}
a:hover{color:var(--yellow)}
img{max-width:100%;height:auto}

/* nav styles inherited from index.css */
.nav-back-gallery{display:none}

/* ── SCROLL CONTAINER ──────────────────────────────── */
.punk-scroll{
  position:fixed;
  top:var(--nav-height);
  left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  z-index:9991;
  scroll-behavior:smooth;
}
.punk-scroll::-webkit-scrollbar{width:4px}
.punk-scroll::-webkit-scrollbar-track{background:var(--dark)}
.punk-scroll::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}

/* ── MAIN LAYOUT ────────────────────────────────────── */
.punk-page{
  max-width:1200px;margin:0 auto;padding:24px 24px 64px;
  display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1.2fr);gap:40px;
}

/* ── LEFT COLUMN ────────────────────────────────────── */
.punk-left{position:sticky;top:24px;align-self:start}
.punk-image-wrap{
  position:relative;background:var(--panel);border:1px solid var(--blue-border);
  border-radius:10px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 40px rgba(26,159,212,.08);
}
.punk-image-wrap img{
  width:100%;display:block;image-rendering:pixelated;
}
.punk-close{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:18px;line-height:1;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  border:none;padding:4px 10px;border-radius:4px;
  cursor:pointer;transition:background .2s,color .2s;
}
.punk-close:hover{background:rgba(0,0,0,.7);color:#fff}
.rank-badge{
  position:absolute;top:12px;right:12px;
  background:rgba(6,11,18,.85);backdrop-filter:blur(8px);
  border:1px solid var(--blue-border);border-radius:6px;
  padding:8px 14px;text-align:center;
}
.rank-badge-num{font-family:"Orbitron",sans-serif;font-size:clamp(16px,3vw,22px);font-weight:900;color:var(--blue-bright);line-height:1}
.rank-badge-pct{font-family:"Share Tech Mono",monospace;font-size:10px;color:var(--text-dim);margin-top:2px}

/* ═══ TIER BADGE IN SUBTITLE ═══ */
.punk-tier-badge {
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
}

/* ═══ TIER STAR IN TITLE ═══ */
.punk-title-star {
  font-size: 22px;
  vertical-align: middle;
  margin-right: 4px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* ═══ TIER-COLORED IMAGE BORDERS ═══ */
.tier-border-legendary { border-color: rgba(231,76,60,.7) !important; box-shadow: 0 4px 20px rgba(231,76,60,.3) }
.tier-border-epic      { border-color: rgba(255,176,38,.7) !important; box-shadow: 0 4px 20px rgba(255,176,38,.3) }
.tier-border-rare      { border-color: rgba(142,68,173,.7) !important; box-shadow: 0 4px 20px rgba(142,68,173,.3) }
.tier-border-uncommon  { border-color: rgba(52,152,219,.7) !important; box-shadow: 0 4px 20px rgba(52,152,219,.3) }
.tier-border-common    { border-color: rgba(39,174,96,.7)  !important; box-shadow: 0 4px 20px rgba(39,174,96,.3) }
.tier-border-standard  { border-color: rgba(149,165,166,.4) !important }

/* ═══ MARKETPLACE BUTTONS — match index.php modal style ═══ */
.marketplace-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
}
.marketplace-buttons > *{
  flex: 1 1 0;
  min-width: 0;
}
.mp-btn {
  font-family: "Rajdhani", "Share Tech Mono", sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: var(--mp-color, #007bff);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter .2s;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}
.mp-btn::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}
.mp-btn:hover::after {
  transform: scaleX(1);
}
.mp-btn:hover {
  filter: brightness(1.15);
  color: #fff;
}
.mp-btn .xrpcafe-mug {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mp-btn .xrpcafe-mug img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.mp-btn .xrpcafe-mug::before,.mp-btn .xrpcafe-mug::after{content:'';position:absolute;bottom:100%;width:3px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);opacity:0;pointer-events:none}
.mp-btn .xrpcafe-mug::before{left:3px;animation-delay:0s}
.mp-btn .xrpcafe-mug::after{left:10px;animation-delay:.4s}
.mp-btn:hover .xrpcafe-mug::before,.mp-btn:hover .xrpcafe-mug::after{opacity:1;animation:mug-steam 1s ease-out infinite}
/* mug-steam keyframes inherited from index.css */
/* share button styles (.sx-*) inherited from index.css */

/* ── RIGHT COLUMN ───────────────────────────────────── */
.punk-right{}
.punk-title{
  font-family:"Orbitron",sans-serif;font-size:clamp(22px,4vw,36px);font-weight:900;
  color:var(--blue-bright);letter-spacing:2px;line-height:1.2;margin-bottom:8px;
}
.punk-subtitle{
  font-family:"Share Tech Mono",monospace;font-size:clamp(11px,1.5vw,13px);
  color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;line-height:1.6;margin-bottom:24px;
}

/* Rarity DNA */
.rarity-dna{
  display:flex;align-items:flex-end;gap:3px;height:40px;
  margin-bottom:28px;padding:12px 16px;
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
}
.dna-bar{
  flex:1;min-width:6px;border-radius:2px 2px 0 0;
  transition:height .4s ease;
}

/* Traits */
.section-label{
  font-family:"Press Start 2P",monospace;font-size:clamp(9px,1.2vw,11px);
  color:var(--blue-bright);letter-spacing:3px;text-transform:uppercase;
  margin-bottom:14px;
}
.traits-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px;
  margin-bottom:32px;
}
.trait-card{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:14px 16px;transition:border-color .2s;
}
.trait-card:hover{border-color:var(--blue)}
.trait-type{font-family:"Share Tech Mono",monospace;font-size:10px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.trait-value{font-family:"Rajdhani",sans-serif;font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px}
.trait-rarity{display:flex;align-items:center;gap:8px}
.trait-pct{font-family:"Share Tech Mono",monospace;font-size:11px}
.trait-label{font-family:"Share Tech Mono",monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase}
.trait-bar{height:3px;border-radius:2px;background:var(--panel2);margin-top:6px;overflow:hidden}
.trait-bar-fill{height:100%;border-radius:2px;transition:width .6s ease}

/* Sales */
.sales-table{width:100%;border-collapse:collapse;margin-bottom:32px}
.sales-table th{
  font-family:"Share Tech Mono",monospace;font-size:10px;color:var(--text-dim);
  letter-spacing:2px;text-transform:uppercase;text-align:left;
  padding:8px 12px;border-bottom:1px solid var(--border);
}
.sales-table td{
  font-family:"Share Tech Mono",monospace;font-size:12px;color:var(--text);
  padding:10px 12px;border-bottom:1px solid var(--border);
}
.sales-table tr:hover td{background:rgba(26,159,212,.04)}
.sales-empty{
  font-family:"Share Tech Mono",monospace;font-size:12px;color:var(--text-dim);
  padding:20px;text-align:center;background:var(--panel);border:1px solid var(--border);
  border-radius:6px;margin-bottom:32px;
}

/* Similar punks */
.similar-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,120px),1fr));gap:10px;
  margin-bottom:32px;
}
.similar-card{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;text-decoration:none;transition:border-color .2s,transform .2s;
}
.similar-card:hover{border-color:var(--blue-bright);transform:translateY(-2px)}
.similar-card img{width:100%;display:block;image-rendering:pixelated}
.similar-info{padding:8px 10px}
.similar-id{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--blue-bright)}
.similar-rank{font-family:"Share Tech Mono",monospace;font-size:9px;color:var(--text-dim)}

/* Prev/Next */
.punk-nav-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:24px;border-top:1px solid var(--border);
}
.punk-nav-link{
  display:flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 20px;background:var(--panel);border:1px solid var(--border);border-radius:6px;
  font-family:"Share Tech Mono",monospace;font-size:12px;color:var(--blue-bright);
  text-decoration:none;letter-spacing:1px;transition:all .2s;
  position:relative;overflow:hidden;
}
.punk-nav-link::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.punk-nav-link:hover::after{transform:scaleX(1)}
.punk-nav-link:hover{border-color:var(--blue);background:var(--blue-glass);color:var(--blue-bright)}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:768px){
  .nav-back-gallery{display:inline;font-weight:600}
  .punk-page{grid-template-columns:1fr;gap:24px;padding:20px 16px 48px}
  .punk-left{position:static}
  .marketplace-buttons{flex-wrap:wrap}
  .traits-grid{grid-template-columns:1fr 1fr}
  .similar-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:480px){
  .traits-grid{grid-template-columns:1fr}
  .similar-grid{grid-template-columns:repeat(3,1fr)}
  .marketplace-buttons{flex-direction:column}
}