:root{
  color-scheme:dark;
  --gold:#f5c451;
  --cyan:#3ee6ff;
  --pink:#ff3ea5;
  --silver:#c9cdd6;
  --ink:#090b18;
  --serif:'Inter',Arial,sans-serif;
  --story:'Inter',Arial,sans-serif
}

*{
  box-sizing:border-box
}
html,body{
  min-height:100%;
  margin:0;
  background:var(--ink);
  color:#f5f0ff;
  font-family:var(--serif)
}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:radial-gradient(ellipse at 48% 13%,#211637 0,#0b0c1a 50%,#070810 100%)
}
button{
  font:inherit
}
.aurora{
  position:fixed;
  z-index:0;
  width:52vw;
  height:45vw;
  border-radius:50%;
  filter:blur(100px);
  opacity:.13;
  pointer-events:none;
  animation:aurora-drift 24s ease-in-out infinite alternate
}
.aurora-one{
  left:-10%;
  top:12%;
  background:radial-gradient(ellipse,#683ab4,transparent 70%)
}
.aurora-two{
  right:-12%;
  top:45%;
  background:radial-gradient(ellipse,#146d8a,transparent 69%);
  animation-delay:-9s
}
.topbar,.archive-layout{
  position:relative;
  z-index:1
}
.topbar{
  min-height:104px;
  display:grid;
  grid-template-columns:1fr minmax(300px,2fr) 1fr;
  align-items:center;
  gap:20px;
  padding:16px 4vw;
  border-bottom:1px solid #dfc77d24;
  background:linear-gradient(180deg,#080914ed,#08091488)
}
.brand{
  color:var(--gold);
  text-decoration:none;
  font-size:18px;
  font-weight:900;
  letter-spacing:.12em
}
.brand span{
  color:#b3a6ca;
  font-size:10px
}
.page-heading{
  text-align:center
}
.page-heading small,.panel-kicker{
  color:#b9a7db;
  font-size:9px;
  font-weight:700;
  letter-spacing:.28em
}
.page-heading h1{
  margin:6px 0 0;
  color:#f4e5c5;
  font-size:clamp(16px,2vw,26px);
  letter-spacing:.12em;
  text-shadow:0 0 22px #f5c45138
}
.topbar nav{
  display:flex;
  justify-content:flex-end;
  gap:17px
}
.topbar nav a{
  color:#c9bfd8;
  font-size:11px;
  font-weight:600;
  text-decoration:none
}
.topbar nav a:hover{
  color:var(--gold)
}

.archive-layout{
  max-width:1680px;
  margin:auto;
  padding:20px 3vw 48px
}
.stats-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px
}
.stat-tile{
  min-height:72px;
  display:grid;
  align-content:center;
  gap:5px;
  padding:12px 18px;
  border:1px solid #e8cb7138;
  border-radius:10px;
  background:linear-gradient(135deg,#171526df,#0c0d1bdf);
  box-shadow:inset 0 1px #fff1,0 8px 30px #0003
}
.stat-tile span{
  color:#9991aa;
  font-size:8px;
  font-weight:700;
  letter-spacing:.17em
}
.stat-tile strong{
  overflow:hidden;
  color:#f2dfb6;
  font-size:18px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.oldest-stat strong{
  font: 500 17px var(--story)
}
.content-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:20px
}
.archive-main{
  min-width:0
}
.sky-panel,.collection,.leaderboard{
  border:1px solid #d3bd7430;
  border-radius:15px;
  background:linear-gradient(155deg,#151526d9,#0b0c18ed);
  box-shadow:0 16px 50px #0005,inset 0 0 38px #9146ff0c
}
.sky-panel{
  padding:16px 18px 18px
}
.section-heading,.collection-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.section-heading h2,.collection-heading h2{
  margin:4px 0 0;
  color:#f4e5c5;
  font-size:clamp(16px,1.7vw,22px);
  letter-spacing:.12em
}
.sky-hint{
  color:#858299;
  font-size:9px;
  letter-spacing:.06em
}
.star-stage{
  position:relative;
  height:360px;
  min-height:300px;
  max-height:380px;
  margin-top:8px;
  overflow:hidden;
  border:1px solid #d2c7ff12;
  border-radius:11px;
  background:radial-gradient(ellipse at 50% 50%,#29203955,transparent 74%),linear-gradient(180deg,#090b1880,#090b1833)
}
#sky-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:manipulation
}
.empty-state{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  color:#777589;
  font: 500 17px var(--story);
  text-align:center;
  pointer-events:none
}
#star-tooltip{
  position:absolute;
  z-index:3;
  display:none;
  max-width:240px;
  padding:7px 10px;
  border:1px solid #f5c45177;
  border-radius:6px;
  background:#11101ef2;
  color:#fff0c9;
  font-size:10px;
  box-shadow:0 0 18px #f5c45122;
  pointer-events:none
}

.collection{
  margin-top:18px;
  padding:18px
}
.collection-heading{
  align-items:flex-end;
  margin-bottom:16px
}
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid #ffffff20;
  border-radius:99px;
  background:#ffffff08;
  color:#c5bed2;
  font-size:9px;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s
}
.filter-chip span{
  color:#847e95;
  font-variant-numeric:tabular-nums
}
.filter-chip:hover,.filter-chip.active{
  border-color:var(--gold);
  background:#f5c45115;
  color:#fff1c5
}
.filter-chip.active span{
  color:var(--gold)
}
.card-collection{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;
  align-items:stretch
}
.collection-empty{
  grid-column:1/-1;
  padding:42px 12px;
  color:#7f7a91;
  font: 500 16px var(--story);
  text-align:center
}

.lore-card{
  --rarity-color:var(--silver);
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:390px;
  display:flex;
  flex-direction:column;
  padding:12px 13px 10px;
  overflow:hidden;
  border:2px solid var(--rarity-color);
  border-radius:15px;
  color:#fff5d6;
  background:linear-gradient(145deg,#291543,#0c0917 48%,#21102e);
  box-shadow:0 0 0 3px #100a1a,0 8px 27px color-mix(in srgb,var(--rarity-color) 27%,transparent),inset 0 0 26px color-mix(in srgb,var(--rarity-color) 15%,transparent);
  transform-style:preserve-3d;
  transition:box-shadow .25s,border-color .25s;
  cursor:pointer
}
.lore-card.common{
  --rarity-color:var(--silver)
}
.lore-card.rare{
  --rarity-color:var(--cyan)
}
.lore-card.epic{
  --rarity-color:var(--pink)
}
.lore-card.legendary{
  --rarity-color:var(--gold)
}
.lore-card:hover{
  box-shadow:0 0 0 3px #100a1a,0 16px 44px color-mix(in srgb,var(--rarity-color) 54%,transparent),inset 0 0 30px color-mix(in srgb,var(--rarity-color) 24%,transparent)
}
.lore-card.legendary{
  animation:legendary-glint 5s ease-in-out infinite
}
.card-edge{
  position:absolute;
  z-index:-1;
  inset:6px;
  border:1px solid color-mix(in srgb,var(--rarity-color) 66%,transparent);
  border-radius:10px;
  pointer-events:none
}
.card-meta,.card-footer{
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--rarity-color);
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em
}
.card-meta{
  padding:1px 3px 8px
}
.card-art{
  position:relative;
  flex:0 0 126px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--rarity-color);
  border-radius:5px;
  background:radial-gradient(ellipse at 50% 45%,#aa60d1,#361553 44%,#090712 77%)
}
.card-art:before,.card-art:after{
  position:absolute;
  inset:-40%;
  content:'';
  background:conic-gradient(from 0deg,transparent,#f5c45120,#3ee6ff38,transparent,#ff3ea53b,transparent);
  animation:nebula-turn 18s linear infinite
}
.card-art:after{
  inset:0;
  background:radial-gradient(ellipse,transparent 35%,#080610b8);
  animation:none
}
.sigil-art{
  z-index:1;
  color:#fff3b8;
  font-size:78px;
  line-height:1;
  text-shadow:0 0 9px #fff,0 0 25px var(--rarity-color),0 0 48px var(--rarity-color)
}
.art-caption{
  position:absolute;
  z-index:2;
  bottom:7px;
  color:#fff5d6a8;
  font-size:6px;
  letter-spacing:.24em
}
.card-ribbon{
  z-index:2;
  position:relative;
  margin:-8px -18px 0;
  padding:9px 15px 8px;
  transform:rotate(-1deg);
  border-top:1px solid #fff7;
  border-bottom:1px solid var(--rarity-color);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--rarity-color) 52%,#21102e),#251433 52%,color-mix(in srgb,var(--rarity-color) 52%,#21102e),transparent);
  text-align:center
}
.card-ribbon h3{
  margin:0;
  color:#fff8dc;
  font-size:13px;
  line-height:1.2;
  text-shadow:0 0 12px var(--rarity-color)
}
.card-copy{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:9px 3px;
  text-align:center
}
.card-story{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  color:#f2e6d8;
  font: 500 13px/1.35 var(--story);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}
.card-explainer{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  color:#c3b4d2;
  font-size:8px;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}
.card-witness-title{
  z-index:2;
  margin:0 0 5px;
  color:var(--rarity-color);
  font-size:7px;
  font-weight:700;
  letter-spacing:.2em;
  text-align:center
}
.card-witnesses{
  z-index:2;
  min-height:40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:center;
  gap:4px
}
.card-witness-avatar{
  width:25px;
  height:25px;
  overflow:hidden;
  border:1px solid var(--rarity-color);
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#f5c451,#462c67 70%);
  box-shadow:0 0 8px color-mix(in srgb,var(--rarity-color) 40%,transparent)
}
.card-witness-avatar img,.avatar-wrap img{
  width:100%;
  height:100%;
  object-fit:cover
}
.card-witness-avatar span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#fff1d2;
  font-size:9px
}
.card-footer{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid color-mix(in srgb,var(--rarity-color) 38%,transparent);
  font-size:6px
}
.card-foil{
  position:absolute;
  z-index:5;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 27%,#fff8 42%,#3ee6ff55 48%,#ff3ea555 54%,transparent 69%);
  background-size:240% 100%;
  mix-blend-mode:color-dodge;
  transition:opacity .25s
}
.lore-card:hover .card-foil,.lore-card.legendary .card-foil{
  opacity:.2;
  animation:foil-sweep 4.8s ease-in-out infinite
}
.new-ribbon{
  position:absolute;
  z-index:6;
  top:18px;
  right:-29px;
  width:112px;
  padding:5px 0;
  transform:rotate(38deg);
  background:#ff3e69;
  color:white;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  text-align:center;
  box-shadow:0 0 17px #ff3e69a8
}

.leaderboard{
  align-self:start;
  padding:20px 16px
}
.leaderboard h2{
  margin:7px 0 16px;
  color:var(--gold);
  font-size:17px;
  letter-spacing:.16em
}
.leaderboard ol{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none
}
.leader-row{
  display:grid;
  grid-template-columns:26px 34px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-height:48px;
  padding:5px;
  border-bottom:1px solid #ffffff10
}
.leader-rank{
  display:grid;
  place-items:center;
  color:#77758b;
  font-size:11px;
  font-weight:700
}
.leader-row:first-child .leader-rank{
  color:#fff0a6
}
.leader-row:nth-child(2) .leader-rank{
  color:#dce5ef
}
.leader-row:nth-child(3) .leader-rank{
  color:#e4a879
}
.rank-crown{
  width:22px;
  height:19px;
  filter:drop-shadow(0 0 5px #f5c45175)
}
.avatar-wrap{
  width:32px;
  height:32px;
  overflow:hidden;
  border:1px solid #f5c45188;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#f5c451,#462c67 70%)
}
.leader-name{
  min-width:0;
  overflow:hidden;
  color:#e9e1f2;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.leader-score{
  color:#b6a3d2;
  font-size:8px;
  white-space:nowrap
}
.loading-row{
  padding:12px;
  color:#8a849b;
  font-size:10px
}

.modal-backdrop{
  position:fixed;
  z-index:10;
  inset:0;
  display:none;
  background:#03030ad9;
  backdrop-filter:blur(9px)
}
.lore-modal{
  position:fixed;
  z-index:11;
  left:50%;
  top:50%;
  width:min(1120px,94vw);
  height:min(820px,90vh);
  display:none;
  grid-template-columns:minmax(250px,.78fr) minmax(0,1fr);
  gap:clamp(18px,3vw,38px);
  padding:clamp(20px,3vw,38px);
  overflow:auto;
  transform:translate(-50%,-50%);
  border:1px solid #f5c4518a;
  border-radius:18px;
  background:radial-gradient(ellipse at 20% 10%,#33234a,#11101d 62%,#0b0c17);
  box-shadow:0 0 0 5px #100a1a,0 25px 100px #000e,0 0 60px #f5c4511f
}
.lore-modal.open{
  display:grid
}
.close-card{
  position:absolute;
  z-index:10;
  right:12px;
  top:12px;
  width:36px;
  height:36px;
  border:1px solid #eacb7388;
  border-radius:50%;
  background:#151321;
  color:#ffe7a9;
  font:24px/1 sans-serif;
  cursor:pointer
}
.modal-card-slot{
  min-width:0;
  display:grid;
  place-items:center;
  perspective:1200px
}
.modal-card-slot .lore-card{
  width:min(100%,370px);
  min-height:590px;
  animation:card-flip-in .7s cubic-bezier(.2,.8,.2,1) both;
  cursor:default
}
.modal-card-slot .card-art{
  flex-basis:190px
}
.modal-card-slot .sigil-art{
  font-size:116px
}
.modal-card-slot .card-ribbon h3{
  font-size:19px
}
.modal-card-slot .card-story{
  font-size:16px
}
.modal-card-slot .card-explainer{
  font-size:10px
}
.modal-card-slot .card-witness-avatar{
  width:34px;
  height:34px
}
.modal-card-slot .card-witness-avatar span{
  font-size:12px
}
.record-details{
  min-width:0;
  align-self:center;
  padding:10px 4px 8px;
  color:#eadbc0
}
.record-kicker{
  padding-right:35px;
  color:var(--gold);
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em
}
.record-details>h2{
  margin:8px 35px 14px 0;
  color:#fff1cb;
  font-size:clamp(22px,3vw,36px);
  line-height:1.16
}
.record-details section{
  margin-top:15px
}
.record-details h3{
  margin:0 0 5px;
  color:#d6b867;
  font-size:9px;
  letter-spacing:.19em
}
.record-details p{
  margin:0;
  color:#eee2d3;
  font: 500 16px/1.45 var(--story)
}
.clip-frame{
  position:relative;
  min-height:clamp(150px,22vh,230px);
  overflow:hidden;
  border:2px solid #b58c49;
  border-radius:6px;
  background:#090912;
  box-shadow:0 0 22px #f5c45117
}
.clip-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}
.clip-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:8px;
  color:#d7c39f;
  font-size:9px;
  letter-spacing:.14em;
  text-align:center
}
.clip-placeholder span{
  color:#a99c83;
  font: 500 15px var(--story);
  letter-spacing:0
}
.record-witnesses>div{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.witness{
  display:grid;
  justify-items:center;
  gap:3px;
  max-width:62px;
  color:#c8bbab;
  font-size:7px;
  text-align:center
}
.record-footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:15px;
  padding-top:10px;
  border-top:1px solid #89652d55;
  color:#d6c39d;
  font-size:8px;
  letter-spacing:.08em
}
.record-footer time{
  margin-left:auto
}

.new-card{
  animation:card-arrive .75s cubic-bezier(.2,.8,.2,1) both
}
.new-card:after{
  position:absolute;
  z-index:4;
  inset:-20%;
  content:'';
  background:radial-gradient(circle at center,#fff9 0,transparent 47%);
  pointer-events:none;
  animation:supernova .95s ease-out both
}

@keyframes aurora-drift{
  to{
    transform:translate(12vw,8vh) scale(1.2);
    opacity:.19
  }

}
@keyframes nebula-turn{
  to{
    transform:rotate(360deg) scale(1.08)
  }

}
@keyframes foil-sweep{
  0%,100%{
    background-position:150% 0
  }
  50%{
    background-position:-30% 0
  }

}
@keyframes legendary-glint{
  0%,100%{
    filter:brightness(1)
  }
  50%{
    filter:brightness(1.08)
  }

}
@keyframes card-flip-in{
  from{
    opacity:0;
    transform:rotateY(-18deg) rotateX(6deg) scale(.88)
  }
  to{
    opacity:1;
    transform:rotateY(0) rotateX(0) scale(1)
  }

}
@keyframes card-arrive{
  from{
    opacity:0;
    transform:translateY(40px) scale(.88)
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1)
  }

}
@keyframes supernova{
  0%{
    opacity:.9;
    transform:scale(.1)
  }
  100%{
    opacity:0;
    transform:scale(1.8)
  }

}

@media(max-width:1050px){
  .content-layout{
    grid-template-columns:minmax(0,1fr) 230px;
    gap:12px
  }
  .card-collection{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr))
  }
  .leaderboard{
    padding:17px 11px
  }
  .leader-row{
    grid-template-columns:22px 30px minmax(0,1fr) auto;
    gap:5px
  }

}
@media(max-width:800px){
  .topbar{
    grid-template-columns:1fr auto
  }
  .page-heading{
    grid-column:1/-1;
    grid-row:2
  }
  .topbar nav{
    grid-column:2;
    grid-row:1
  }
  .content-layout{
    grid-template-columns:1fr
  }
  .leaderboard{
    margin-top:0
  }
  .leaderboard ol{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .star-stage{
    height:43vh;
    min-height:280px
  }
  .lore-modal{
    grid-template-columns:minmax(200px,.8fr) minmax(0,1fr);
    gap:16px
  }
  .modal-card-slot .lore-card{
    min-height:520px;
    padding:10px
  }
  .modal-card-slot .card-art{
    flex-basis:150px
  }
  .modal-card-slot .sigil-art{
    font-size:88px
  }

}
@media(max-width:560px){
  .topbar{
    min-height:88px;
    padding:12px 4vw
  }
  .brand{
    font-size:14px
  }
  .brand span{
    font-size:8px
  }
  .topbar nav{
    gap:9px
  }
  .topbar nav a{
    font-size:9px
  }
  .page-heading h1{
    font-size:15px
  }
  .archive-layout{
    padding:12px 3vw 28px
  }
  .stats-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }
  .stat-tile{
    min-height:62px;
    padding:9px 11px
  }
  .stat-tile strong{
    font-size:15px
  }
  .oldest-stat strong{
    font-size:14px
  }
  .sky-panel,.collection{
    padding:13px 11px
  }
  .section-heading,.collection-heading{
    align-items:flex-start;
    flex-direction:column
  }
  .sky-hint{
    font-size:8px
  }
  .star-stage{
    height:42vh;
    min-height:250px
  }
  .filter-chips{
    justify-content:flex-start;
    gap:5px
  }
  .filter-chip{
    padding:6px 8px;
    font-size:8px
  }
  .card-collection{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .lore-card{
    min-height:350px;
    padding:9px
  }
  .card-art{
    flex-basis:100px
  }
  .sigil-art{
    font-size:60px
  }
  .card-ribbon{
    margin-left:-13px;
    margin-right:-13px
  }
  .card-ribbon h3{
    font-size:11px
  }
  .card-copy{
    padding:7px 1px
  }
  .card-story{
    font-size:11px
  }
  .card-explainer{
    font-size:7px
  }
  .card-witnesses{
    min-height:33px
  }
  .card-witness-avatar{
    width:21px;
    height:21px
  }
  .card-footer{
    font-size:5px
  }
  .leaderboard ol{
    grid-template-columns:1fr
  }
  .lore-modal,.lore-modal.open{
    width:94vw;
    height:92vh;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:16px;
    padding:18px 14px 20px
  }
  .modal-card-slot .lore-card{
    width:min(100%,330px);
    min-height:460px
  }
  .modal-card-slot .card-art{
    flex-basis:125px
  }
  .modal-card-slot .sigil-art{
    font-size:76px
  }
  .modal-card-slot .card-ribbon h3{
    font-size:15px
  }
  .modal-card-slot .card-story{
    font-size:13px
  }
  .record-details{
    padding:0 3px 12px
  }
  .record-details>h2{
    font-size:22px
  }
  .clip-frame{
    min-height:170px
  }
  .record-details p{
    font-size:14px
  }
  .record-footer time{
    margin-left:0
  }

}
@media(max-width:390px){
  .brand span{
    display:none
  }
  .card-collection{
    gap:8px
  }
  .lore-card{
    min-height:330px;
    padding:8px
  }
  .card-meta{
    font-size:7px
  }
  .card-art{
    flex-basis:88px
  }
  .sigil-art{
    font-size:52px
  }
  .card-ribbon h3{
    font-size:10px
  }
  .card-story{
    -webkit-line-clamp:2
  }
  .card-witness-avatar{
    width:18px;
    height:18px
  }
  .filter-chip{
    gap:4px;
    padding:6px 7px
  }

}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }

}

/* LORE archive readability system */
:root {
  color-scheme: dark;
  --ink: #0e0a1c;
  --surface: rgba(14, 10, 28, .96);
  --surface-raised: #19142a;
  --text-primary: #f7f3ff;
  --text-muted: #b9b0d6;
  --gold: #f5c451;
  --purple: #9146ff;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --radius-card: 16px;
  --radius-display: 24px;
  --shadow-panel: 0 16px 48px rgba(0, 0, 0, .42);
  --duration-fast: 200ms;
  --duration-ui: 300ms;
  --duration-scene: 400ms;
  --font-body: 'Inter', Arial, sans-serif;
  --font-display: 'Cinzel', Georgia, serif;
  --serif: var(--font-body);
  --story: var(--font-body);
}

*, *::before, *::after { box-sizing: border-box; }
body, body * { font-family: var(--font-body); font-style: normal; }
body { min-height: 100vh; overflow-x: hidden; background: var(--ink); color: var(--text-primary); font-size: clamp(18px, 1.36vw, 26px); line-height: 1.35; }
.aurora { opacity: .035; }
.topbar, .stats-strip, .sky-panel, .collection, .leaderboard, .lore-modal, .record-details, .clip-frame, .modal-card-slot .lore-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.topbar { min-height: 100px; gap: 24px; margin: 16px 32px 0; padding: 20px 32px; }
.brand { color: var(--gold); font: 900 22px/1.2 var(--font-display); }
.brand span { color: var(--text-muted); font: 700 16px/1.2 var(--font-body); letter-spacing: .08em; }
.page-heading small, .panel-kicker, .record-kicker, .card-meta, .card-witness-title, .stat-tile > span, .record-footer {
  color: var(--text-muted);
  font: 700 clamp(16px, 1.04vw, 20px)/1.35 var(--font-body);
  letter-spacing: .08em;
}
.page-heading h1, .section-heading h2, .collection-heading h2, .leaderboard h2, .record-details h3 {
  color: var(--text-primary);
  font: 900 clamp(26px, 2vw, 38px)/1.2 var(--font-display);
  letter-spacing: .025em;
}
.topbar nav { display: flex; flex-wrap: wrap; gap: 16px; }
.topbar nav a, .sky-hint { color: var(--text-muted); font: 700 clamp(16px,1.04vw,20px)/1.35 var(--font-body); }
.archive-layout { width: min(1728px, calc(100% - 128px)); margin: 24px auto 64px; }
.stats-strip { gap: 16px; padding: 16px; }
.stat-tile { min-height: 92px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #19142a; }
.stat-tile strong { color: var(--text-primary); font: 800 clamp(22px, 1.8vw, 34px)/1.2 var(--font-body); }
.content-layout { gap: 24px; margin-top: 24px; }
.sky-panel, .collection, .leaderboard { padding: 24px; }
.section-heading, .collection-heading { gap: 24px; margin-bottom: 16px; }
.section-heading h2, .collection-heading h2, .leaderboard h2 { margin: 8px 0 0; }
.star-stage { min-height: 430px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #100c1d; }
.empty-state { max-width: 60ch; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: var(--surface); color: var(--text-primary); font: 600 20px/1.35 var(--font-body); text-align: center; }
#star-tooltip { max-width: min(480px, 70vw); padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(14,10,28,.98); color: var(--text-primary); font: 700 18px/1.35 var(--font-body); }
.filter-chips { gap: 8px; }
.filter-chip, .filter-chip.active { min-height: 48px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font: 700 clamp(16px,1.04vw,20px)/1.2 var(--font-body); transition: background var(--duration-ui) cubic-bezier(.215,.61,.355,1), border-color var(--duration-ui) cubic-bezier(.215,.61,.355,1); }
.filter-chip.active { border-color: var(--gold); background: #30233b; }
.card-collection { gap: 24px; }
.lore-card { min-height: 640px; padding: 20px; border: 2px solid var(--rarity-color); border-radius: 24px; background: var(--surface); color: var(--text-primary); }
.card-meta { min-height: 36px; }
.rarity-pill, .art-caption, .card-stamp, .new-ribbon { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: #0e0a1c; color: var(--text-primary); font: 800 clamp(16px,1.04vw,20px)/1.2 var(--font-body); letter-spacing: .08em; }
.card-art { flex-basis: 42%; border-radius: 12px; }
.sigil-art { color: var(--text-primary); }
.card-ribbon { min-height: 84px; margin: 0 -8px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #0e0a1c; transform: none; }
.card-ribbon h3 { display: -webkit-box; overflow: hidden; color: var(--text-primary); font: 900 clamp(30px, 2.9vw, 56px)/1.15 var(--font-display); text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-copy { justify-content: flex-start; gap: 8px; margin-top: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: var(--surface); text-align: left; }
.card-story { display: -webkit-box; overflow: hidden; max-width: 60ch; color: var(--text-primary); font: 500 clamp(18px, 1.36vw, 26px)/1.35 var(--font-body); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-explainer { display: -webkit-box; overflow: hidden; max-width: 60ch; color: var(--text-muted); font: 500 18px/1.35 var(--font-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-witness-title { margin: 12px 0 8px; text-align: center; }
.card-witnesses { min-height: 56px; gap: 8px; }
.card-witness-avatar, .card-witness-avatar img, .witness-overflow { width: 48px; height: 48px; }
.card-witness-avatar { border: 2px solid var(--purple); border-radius: 50%; background: #19142a; }
.witness-overflow { display: grid; place-items: center; color: var(--text-primary); font: 800 16px/1 var(--font-body); }
.card-footer { padding-top: 10px; color: var(--text-muted); font: 700 clamp(14px,1.04vw,20px)/1.3 var(--font-body); }
.leaderboard ol { gap: 8px; }
.leader-row, .loading-row { min-height: 64px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #19142a; color: var(--text-primary); font: 700 20px/1.35 var(--font-body); }
.modal-backdrop { background: rgba(5,4,12,.82); }
.lore-modal { gap: 24px; padding: 24px; }
.modal-card-slot .lore-card { width: min(100%, 420px); }
.close-card { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: #0e0a1c; color: var(--text-primary); font: 700 28px/1 var(--font-body); }
.record-details { max-width: 68ch; padding: 24px; }
.record-details h2 { color: var(--text-primary); font: 800 clamp(24px, 1.8vw, 34px)/1.25 var(--font-body); }
.record-details h3 { margin: 24px 0 8px; color: var(--gold); font-size: 22px; }
.record-details p, .clip-placeholder { max-width: 60ch; color: var(--text-primary); font: 500 clamp(18px, 1.36vw, 26px)/1.35 var(--font-body); }
.clip-frame { min-height: 240px; }
.record-footer { display: flex; flex-wrap: wrap; gap: 16px; }
button, a { transition-duration: var(--duration-ui); }

/* LORE archive fixes */
.content-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.archive-main { min-width: 0; }
.leaderboard { width: 340px; max-width: 340px; }
.leaderboard ol { gap: 8px; }
.leader-row { grid-template-columns: 32px 40px minmax(0, 1fr) auto; gap: 8px; min-height: 56px; padding: 8px; }
.leader-rank { font: 700 16px/1 var(--font-body); }
.rank-crown { width: 28px; height: 24px; }
.leader-row .avatar-wrap { width: 40px; height: 40px; }
.leader-name { min-width: 0; overflow: hidden; color: var(--text-primary); font: 700 18px/1.2 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.leader-score { color: var(--gold); font: 600 16px/1.2 var(--font-body); white-space: nowrap; }
.star-stage { height: 340px; min-height: 340px; max-height: 340px; }
.card-collection { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.lore-card { aspect-ratio: 5 / 7; min-height: 0; height: auto; gap: 8px; padding: 14px; }
.card-meta { min-height: 18px; justify-content: flex-end; padding: 0 2px; color: var(--text-muted); font: 600 13px/1.2 var(--font-body); letter-spacing: 0; }
.card-meta time { white-space: nowrap; }
.card-art { flex: 1 1 34%; min-height: 88px; }
.sigil-art { font-size: clamp(54px, 5vw, 78px); }
.art-caption { display: none; }
.card-ribbon { flex: 0 0 auto; min-height: 0; margin: 0; padding: 8px 10px; transform: none; }
.card-ribbon h3 { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-primary); font: 800 clamp(22px, 1.6vw, 28px)/1.15 var(--font-display); text-align: left; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-copy { flex: 0 0 auto; min-height: 0; gap: 6px; margin: 0; padding: 0 2px; border: 0; background: transparent; }
.card-story { max-width: none; color: var(--text-primary); font: 500 16px/1.35 var(--font-body); -webkit-line-clamp: 3; }
.card-explainer { max-width: none; font: 500 16px/1.35 var(--font-body); }
.card-witness-title { display: none; }
.modal-card-slot .card-witness-title { display: block; margin: 4px 0 0; font-size: 13px; }
.card-witnesses { flex: 0 0 32px; min-height: 32px; flex-wrap: nowrap; justify-content: flex-start; align-content: center; gap: 0; overflow: hidden; }
.card-witness-avatar, .card-witness-avatar img, .witness-overflow { flex: 0 0 32px; width: 32px; height: 32px; }
.card-witness-avatar { margin-left: -8px; border: 2px solid var(--surface); }
.card-witness-avatar:first-child { margin-left: 0; }
.witness-overflow { display: grid; place-items: center; margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--surface-raised); color: var(--text-primary); font: 700 12px/1 var(--font-body); }
.card-footer { flex: 0 0 auto; min-width: 0; margin-top: 0; padding-top: 8px; align-items: center; color: var(--text-muted); font: 600 13px/1.2 var(--font-body); letter-spacing: 0; white-space: nowrap; }
.card-footer span:first-child { overflow: hidden; max-width: 65%; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--rarity-color) 65%, transparent); border-radius: 999px; color: var(--rarity-color); font-size: 11px; text-overflow: ellipsis; }
.card-footer span:last-child { color: var(--text-primary); white-space: nowrap; }
.stat-tile { min-width: 0; }
.stat-tile > span { display: block; font-size: 14px; letter-spacing: .04em; }
.stat-tile strong { display: block; overflow: visible; min-width: 0; font-size: clamp(20px, 1.8vw, 30px); text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.oldest-stat strong { display: -webkit-box; overflow: hidden; font: 600 clamp(18px, 1.45vw, 24px)/1.2 var(--font-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.modal-card-slot .lore-card { aspect-ratio: 5 / 7; min-height: 0; }

@media (max-width: 1100px) {
  .content-layout { grid-template-columns: minmax(0, 1fr); }
  .leaderboard { width: 100%; max-width: none; }
}
@media (max-width: 600px) {
  .card-collection { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .star-stage { height: 340px; min-height: 340px; max-height: 340px; }
  .stats-strip { align-items: stretch; }
  .stat-tile { padding: 12px; }
  .stat-tile > span { font-size: 12px; }
  .stat-tile strong { font-size: 20px; }
  .oldest-stat strong { font-size: 17px; }
}

@media (max-width: 900px) {
  .topbar { margin: 8px 16px 0; padding: 16px; }
  .archive-layout { width: calc(100% - 32px); margin-top: 16px; }
  .content-layout { grid-template-columns: 1fr; }
  .star-stage { min-height: 360px; }
  .lore-card { min-height: 560px; }
  .lore-modal { overflow-y: auto; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .topbar { grid-template-columns: 1fr; }
  .topbar nav { gap: 12px; }
  .topbar nav a { font-size: 16px; }
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-panel, .collection, .leaderboard { padding: 16px; }
  .star-stage { min-height: 300px; }
  .section-heading, .collection-heading { align-items: flex-start; flex-direction: column; }
  .card-collection { grid-template-columns: 1fr; }
  .lore-card { min-height: 560px; }
}

@media (max-width: 900px) {
  .content-layout { grid-template-columns: minmax(0, 1fr); }
  .leaderboard { width: 100%; max-width: none; }
  .star-stage { height: 340px; min-height: 340px; max-height: 340px; }
  .lore-card { aspect-ratio: 5 / 7; min-height: 0; }
}
@media (max-width: 600px) {
  .card-collection { grid-template-columns: minmax(0, 1fr); }
  .lore-card { aspect-ratio: 5 / 7; min-height: 0; }
}

/* Final polish layer */
#leaderboard-title { font-size: clamp(26px, 2vw, 34px); letter-spacing: .04em; overflow-wrap: anywhere; }
.card-collection { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 1500px) { .card-collection { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
#leaderboard-title { overflow-wrap: normal; font-size: clamp(24px, 1.7vw, 30px); }
.card-collection .lore-card h3, .card-collection .card-title { font-size: clamp(18px, 1.15vw, 22px); }
@media (max-width: 700px) {
  .archive-header, header.site-header, body > header { grid-template-columns: 1fr !important; text-align: center; }
  body > header nav, .site-nav, header nav { justify-content: center; flex-wrap: wrap; position: static !important; display: flex; gap: 14px; }
}
@media (max-width: 700px) {
  .topbar { display: flex !important; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .topbar nav { position: static !important; display: flex; justify-content: center; gap: 16px; }
}

/* Refinement: crisp professional card typography (no neon glow), calmer ribbon. */
.card-collection .card-ribbon { transform: none; margin: 0; padding: 10px 14px; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: rgba(14,10,28,.92); text-align: left; }
.card-collection .card-ribbon h3 { color: #fff; text-shadow: none; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.25; letter-spacing: -.01em; text-transform: none; font-variant: normal; }
.card-collection .sigil-art { text-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 30px color-mix(in srgb, var(--rarity-color) 55%, transparent); }
.card-collection .card-story { color: #cfc8e6; }
.card-collection > *:hover { transform: translateY(-4px); }
.topbar { border-radius: 999px; padding: 12px 22px; }
.topbar nav a { padding: 8px 14px; border-radius: 999px; }
.topbar nav a:hover { background: rgba(255,255,255,.06); }