/* 🪙 NOVATOKENS OVERHAUL (2026-09-28). Dresses the page; see nt-overhaul.js. 2D motion only. */

/* header: icons on Earn / Spend / Check, coins drifting down behind the spinning coin */
.nr-token-basics>div{display:grid!important;grid-template-columns:auto 1fr;column-gap:10px;align-items:start}
.nr-token-basics>div>strong,.nr-token-basics>div>span{grid-column:2}
.nt-basic-ic{grid-row:1/3;width:40px;height:40px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 4px 8px #0008)}
.nr-coin-stage{position:relative;isolation:isolate}
.nt-rain{position:absolute;inset:-30px -60px;pointer-events:none;z-index:-1;overflow:hidden}
.nt-rain i{position:absolute;top:-24px;width:20px;height:20px;background:url(/novatoken.png) center/contain no-repeat;opacity:.7;animation:ntRain var(--t) linear infinite;animation-delay:var(--d)}
@keyframes ntRain{to{translate:0 300px;rotate:300deg;opacity:0}}

/* My Tokens: the three counters carry an icon, the numbers are big */
#tab-lookup .token-box{position:relative;overflow:hidden;transition:translate .25s,border-color .25s}
#tab-lookup .token-box:hover{translate:0 -3px;border-color:#d9bf83aa}
#tab-lookup .tbox-label{display:flex;align-items:center;gap:8px}
.nt-box-ic{width:28px;height:28px;object-fit:contain;image-rendering:auto;margin:-4px 0}
#tab-lookup .tbox-num{font-size:40px!important;line-height:1.1;letter-spacing:-.5px}
#tab-lookup .token-box.arcane-box{box-shadow:0 0 40px -18px #d9bf83}

/* Leaderboard: the podium (2 · 1 · 3) */
.nt-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:12px;margin:10px 0 18px;padding:0 4px}
.nt-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;animation:ntRise .7s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d)}
@keyframes ntRise{from{opacity:0;translate:0 40px}}
.nt-pod-av{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid var(--pc,#d9bf83);box-shadow:0 0 24px -6px var(--pc,#d9bf83);display:grid;place-items:center;background:#0d1a1f}
.nt-pod-av img{width:100%;height:100%;object-fit:cover}
.nt-step.s1 .nt-pod-av{width:96px;height:96px}
.nt-pod-medal{width:40px;height:40px;margin-top:-22px;image-rendering:auto;filter:drop-shadow(0 4px 6px #000a)}
.nt-step.s1 .nt-pod-medal{width:48px;height:48px}
.nt-pod-name{font-size:16px;color:#f1e3bd;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-pod-sub{font-size:13px;color:#9fb0a8}
.nt-pod-block{width:100%;margin-top:8px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--pc,#d9bf83) 22%,transparent),#0d1a1f 85%);border:1px solid var(--pc,#d9bf83);border-bottom:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.nt-pod-block strong{font-size:26px;color:#fff6d6}
.nt-pod-block small{font-size:12px;color:#c9d5cb;letter-spacing:.06em}
.nt-step.s1{--pc:#e8c46b}.nt-step.s2{--pc:#c3cfe0}.nt-step.s3{--pc:#d08a5a}
.nt-step.s1 .nt-pod-block{height:120px}.nt-step.s2 .nt-pod-block{height:90px}.nt-step.s3 .nt-pod-block{height:72px}
.nt-step.me .nt-pod-name::after{content:" (you)";color:#8fe3a8;font-weight:600}
.lb-row.nt-in-podium{display:none!important}

/* Log: a timeline down the left, one dot per entry */
.chron-row{position:relative}
.chron-row::before{content:"";position:absolute;left:25px;top:-8px;bottom:-8px;width:2px;background:linear-gradient(#d9bf8300,#d9bf8355 20%,#d9bf8355 80%,#d9bf8300);z-index:0}
.chron-row>.chron-no-img,.chron-row>img,.chron-row>:first-child{position:relative;z-index:1}

@media (max-width:640px){
  .nt-podium{gap:6px}
  .nt-pod-av{width:56px;height:56px}.nt-step.s1 .nt-pod-av{width:72px;height:72px}
  .nt-pod-name{font-size:14px}.nt-pod-block strong{font-size:20px}
  .nt-pod-sub{display:none}
  .nt-step.s1 .nt-pod-block{height:96px}.nt-step.s2 .nt-pod-block{height:72px}.nt-step.s3 .nt-pod-block{height:58px}
  #tab-lookup .tbox-num{font-size:30px!important}
}
@media (prefers-reduced-motion:reduce){.nt-rain,.nt-step{animation:none!important}.nt-rain{display:none}}