/* ---------- Self-hosted name-style fonts ----------
   Previously loaded from fonts.googleapis.com. Ad blockers / privacy
   extensions commonly block that domain, which silently drops the
   font-family override on name effects (Dark Sovereign, Matrix Code,
   24K Monarch, etc.) while the color/glow/animation still renders fine
   since those don't need an external file - looks like "color changes
   but not style". Self-hosting on the same origin removes that failure
   mode entirely. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/cinzel-900.woff2') format('woff2')}
@font-face{font-family:'Cinzel Decorative';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/cinzel-decorative-900.woff2') format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/orbitron-900.woff2') format('woff2')}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-400.woff2') format('woff2')}
@font-face{font-family:'UnifrakturMaguntia';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/unifraktur-maguntia-400.woff2') format('woff2')}
/* ---- shape tokens -------------------------------------------------------
   Every chamfer on the site resolves through these six values. Change them
   here and the whole site's corner language changes; set them all to 0 for
   square edges. The polygons themselves are never edited by hand again. */
:root{
	--cut-xs:4px;
	--cut-sm:6px;
	--cut-btn:8px;
	--cut-md:12px;
	--cut-lg:16px;
	--cut-xl:18px;
}

:root{
  --bg:#0a0a0e; --surface:#151319; --surface-2:#1d1a22; --line:#2f2a37;
  --text:#f4f2f8; --text-2:#cbc6d6; --text-dim:#9a94ac; --text-faint:#877fa0;
  --accent:#8f6fe0; --accent-2:#a488e8; --accent-soft:rgba(143,111,224,.15); --purple-deep:#5a3fb8;
  --online:#4ade80; --online-soft:rgba(74,222,128,.14); --danger:#ff4d67; --danger-soft:rgba(255,77,103,.14); --gold:#ffcf4d; --gold-soft:rgba(255,207,77,.16);
  --silver:#cdc8da; --bronze:#d68f5c; --ink:#000000;
  --r:0; --r-sm:0;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Arial Black","Arial Bold",Impact,"Franklin Gothic Bold",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  color-scheme:dark;
}

/* ---------- reset ---------- */
.pun *{margin:0;padding:0;border:0}
.pun ol,.pun ul{list-style:none}
.pun .clearer,.pun .nosize{height:0;width:0;line-height:0;font-size:0;overflow:hidden}
.pun .clearb,.pun .clearer{clear:both}
.pun .nosize{position:absolute;left:-9999em;text-indent:-9999em;width:0}
html,body{background:url('../img/site-bg2.webp?v=2') center top/cover fixed no-repeat,var(--bg);min-height:100%}
html{overflow-x:hidden}
body{margin:0;color:var(--text-dim);font-family:var(--font);overflow-x:hidden;max-width:100vw}

/* ---------- base ---------- */
.pun{font:14px/1.6 var(--font);color:var(--text-dim);background:radial-gradient(circle, rgba(244,242,248,.035) 1px, transparent 1px) 0 0/26px 26px,url('../img/site-bg2.webp?v=2') center top/cover fixed no-repeat,var(--bg);padding:0;-webkit-font-smoothing:antialiased}
.pun a{color:var(--text-dim);text-decoration:none;transition:color .15s ease}
.pun a:hover{color:var(--accent)}
.pun h1,.pun h2,.pun h3{color:var(--text);font-weight:700;font-family:var(--font-display);letter-spacing:.01em;text-transform:uppercase}
.pun strong{font-weight:700}
.pun input,.pun select,.pun textarea,.pun button{font-family:var(--font);font-size:14px}
.pun code,.pun pre{font-family:var(--mono);font-size:.9em}
.pun ::selection{background:var(--accent-soft);color:var(--text)}
.pun .top-box,.pun .end-box{display:none}
.pun .conl{float:left}
.pun .conr{float:right}
.pun .clearl{clear:left}
@media (prefers-reduced-motion:reduce){.pun *{transition:none!important}}

/* ---------- upsell strip ---------- */
.upsell-strip{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--surface-2);border-bottom:2px solid var(--line);padding:9px 20px;font-size:12.5px;color:var(--text-dim);text-align:center}
.upsell-strip b{color:var(--gold);font-family:var(--font-display)}
.upsell-strip .btn-premium-sm{font-family:var(--font-display);font-size:11px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--bg);padding:7px 14px;clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm))}
.upsell-strip .btn-premium-sm:hover{background:var(--accent-2);color:var(--bg)}
.pun .upsell-close,.pun .upsell-close:hover{background:none!important;border:none;color:var(--text-faint);font-size:13px;cursor:pointer;padding:2px 6px!important;clip-path:none!important;filter:none!important;transform:none!important}
.pun .upsell-close:hover{color:var(--text)}
.upsell-close:hover{color:var(--text)}

/* ---------- topbar (top nav) ---------- */
.topbar{background:var(--ink);border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:20;display:block;padding:0}
.topbar-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:0 24px;height:56px}
/* The mark is the "2", so the wordmark only carries TAP and the two together
   still read 2TAP. */
.pun .brand{display:inline-flex;align-items:center;gap:10px;line-height:1;text-decoration:none;color:var(--text)}
.brand-mark{flex:none;width:30px;height:30px;display:block;
	filter:drop-shadow(0 0 9px rgba(143,111,224,.45));transition:filter .16s ease,transform .16s ease}
.pun .brand:hover .brand-mark{filter:drop-shadow(0 0 15px rgba(143,111,224,.85));transform:translateY(-1px)}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.11em;
	text-transform:uppercase;color:var(--text)}
/* Gradient lettering to match the mark, but only where the browser can clip a
   background to text -- otherwise the transparent fill would leave it invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
	.brand-word{background:linear-gradient(180deg,#ffffff 0%,#efe7ff 42%,#9b7ce8 100%);
		-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.pun .brand:hover{color:var(--text)}
.brand .brk{color:var(--accent)}
@media (max-width:640px){
	.brand-mark{width:26px;height:26px}
	.brand-word{font-size:17px}
}
.navtabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden}
.navtabs{scrollbar-width:none;-ms-overflow-style:none}
.navtabs::-webkit-scrollbar{display:none;height:0}
.navtabs .rail-item{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;color:var(--text-dim);font-size:11.5px;font-weight:700;font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase;border-left:none;white-space:nowrap;position:relative}
.navtabs .rail-item i{display:none}
.navtabs .rail-item:hover{color:var(--text);background:var(--surface-2)}
.navtabs .rail-item.active{color:var(--text);background:transparent;border-left:none}
.navtabs .rail-item.active::before{content:"> ";color:var(--accent)}
.navtabs .rail-item.active::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--accent)}
.navtabs .rail-item .count{margin-left:2px;background:var(--accent);color:var(--bg);font-size:9px;padding:1px 5px}
.top-right{display:flex;align-items:center;gap:10px;flex:none}

.pun .wallet-chip{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);padding:6px 13px;font-family:var(--mono);font-size:12px;color:var(--text-dim);clip-path:polygon(var(--cut-btn) 0,100% 0,100% 100%,0 100%,0 var(--cut-btn))}
.wallet-chip img{width:14px;height:14px}
.wallet-chip b{color:var(--text);font-weight:600;margin-right:2px}
@media (max-width:840px){.wallet-chip{display:none}}

.pun .btn-premium{display:inline-flex;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--bg);padding:9px 16px;clip-path:polygon(var(--cut-btn) 0,100% 0,100% calc(100% - var(--cut-btn)),calc(100% - var(--cut-btn)) 100%,0 100%,0 var(--cut-btn));filter:drop-shadow(2px 2px 0 #000);transition:transform .1s ease,filter .1s ease,background-color .15s ease}
.pun .btn-premium:hover{background:var(--accent-2);color:var(--bg);transform:translate(1px,1px);filter:drop-shadow(1px 1px 0 #000)}
.pun .btn-coins{background:var(--gold)!important}
.pun .btn-coins:hover{background:#ffdb7a!important}

.avatar-menu,.avatar-btn,.avatar-btn .av{position:relative}
.pun .avatar-btn,.pun .avatar-btn:hover{background:none!important;border:none;cursor:pointer;padding:0!important;display:flex;align-items:center;clip-path:none!important;filter:none!important;transform:none!important}
.avatar-btn .av{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.avatar-btn .av .nc-avatar,.avatar-btn .av .nc-avatar-fallback{width:30px;height:30px;font-size:12.5px}
.dropdown{position:absolute;right:0;top:calc(100% + 12px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);min-width:180px;padding:8px;display:none;flex-direction:column;gap:1px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:40;clip-path:polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)))}
.dropdown.open{display:flex}
.pun .dropdown a{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:12.5px;font-weight:600;padding:8px 10px;text-decoration:none}
.dropdown a i{width:14px;text-align:center;opacity:.8}
.dropdown a:hover{color:var(--text);background:var(--surface-2)}
.dropdown a.danger{color:var(--danger)}
.dropdown hr{border:none;border-top:1px solid var(--line);margin:4px 2px}

/* ---------- PM addressee picker ---------- */
.pmsn-addressee-wrap{position:relative;display:inline-block;max-width:100%}
.pmsn-addressee-list{position:absolute;left:0;top:calc(100% + 6px);width:280px;max-width:80vw;max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:60;display:none;clip-path:polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)))}
.pmsn-addressee-list.open{display:block}
.pmsn-addressee-list .pmsn-au-item{padding:8px 12px;font-size:12.5px;color:var(--text-dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmsn-addressee-list .pmsn-au-item:hover,.pmsn-addressee-list .pmsn-au-item.hi{background:var(--surface-2);color:var(--text)}
.pmsn-addressee-list .pmsn-au-empty{padding:10px 12px;font-size:12px;color:var(--text-faint)}

/* ---------- index hero + sidebar ---------- */
.hero{background:radial-gradient(ellipse 560px 240px at 50% 48%,rgba(8,6,14,.8) 0%,rgba(8,6,14,.55) 45%,rgba(8,6,14,.15) 75%,rgba(8,6,14,0) 90%),linear-gradient(180deg,rgba(8,6,14,.35) 0%,rgba(8,6,14,.1) 35%,rgba(8,6,14,.15) 65%,rgba(8,6,14,.55) 100%),url('../img/index-back.jpg') center 30%/cover no-repeat,var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);clip-path:polygon(0 0, calc(100% - var(--cut-xl)) 0, 100% var(--cut-xl), 100% 100%, var(--cut-xl) 100%, 0 calc(100% - var(--cut-xl)));padding:36px 32px;text-align:center;filter:drop-shadow(5px 5px 0 var(--accent))}
.hero-eyebrow,.hero-title,.hero-sub{text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-family:var(--mono)}
.hero-eyebrow::before{content:"";width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}
.hero-title{font-family:var(--font-display);font-size:clamp(24px,4vw,34px);letter-spacing:-.01em;text-transform:uppercase;color:var(--text);margin:0}
.hero-title .accent{color:var(--accent)}
.hero-sub{color:var(--text-dim);font-size:13.5px;max-width:480px;margin:10px auto 20px}
.hero-actions{display:flex;gap:10px;justify-content:center}
.hero-actions a{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase;padding:10px 18px;text-decoration:none;clip-path:polygon(var(--cut-btn) 0,100% 0,100% calc(100% - var(--cut-btn)),calc(100% - var(--cut-btn)) 100%,0 100%,0 var(--cut-btn));transition:transform .1s ease,filter .1s ease,background-color .15s ease}
.hero-actions a.primary{background:var(--accent);color:var(--bg);filter:drop-shadow(3px 3px 0 #000)}
.hero-actions a.primary:hover{background:var(--accent-2);color:var(--bg);transform:translate(2px,2px);filter:drop-shadow(1px 1px 0 #000)}
.hero-actions a.ghost{background:transparent;color:var(--text);border:2px solid var(--text-dim)}
.hero-actions a.ghost:hover{border-color:var(--accent);color:var(--accent)}

.diag{height:13px;margin:24px 0;background:var(--accent);transform:skewY(-1deg);filter:drop-shadow(0 5px 0 #000)}

.idx-grid{display:grid;grid-template-columns:1.85fr 1fr;gap:20px;align-items:start}
@media (max-width:880px){.idx-grid{grid-template-columns:1fr}}

.side-panel{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);clip-path:polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));padding:16px 18px;margin-bottom:16px;filter:drop-shadow(4px 4px 0 var(--accent))}

/* ---------- coins (shared: nav wallet, store, leaderboard) ---------- */
.gem{width:11px;height:11px;flex:none;display:inline-block;transform:rotate(45deg)}
.gem-gold{background:var(--gold)}
.gem-silver{background:var(--silver)}
.gem-bronze{background:var(--bronze)}
.gem.lg{width:18px;height:18px}
.side-head{font-family:var(--font-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.side-empty{font-size:12px;color:var(--text-faint)}

.online-row{display:flex;align-items:center;flex-wrap:wrap}
.online-row .nc-avatar,.online-row .nc-avatar-fallback{width:26px;height:26px;font-size:10px;margin-left:-7px;border:2px solid var(--line)}
.online-row a:first-child .nc-avatar,.online-row a:first-child .nc-avatar-fallback{margin-left:0}
.online-n{margin-left:12px;font-family:var(--mono);font-size:12px;color:var(--text-faint)}
.online-n b{color:var(--text)}

.lb-row{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-bottom:10px}
.lb-row:last-child{margin-bottom:0}
.lb-rank{width:18px;text-align:center;font-weight:700;font-family:var(--mono);font-size:11px;color:var(--text-faint);flex:none}
.lb-row:nth-child(1) .lb-rank{color:var(--gold)}
.lb-name{flex:1;font-weight:600;color:var(--text-dim)}
.lb-score{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}
.lb-row .nc-avatar,.lb-row .nc-avatar-fallback{width:22px;height:22px;font-size:9px}

.upgrade{text-align:center;background:var(--purple-deep);border-top-color:var(--gold)}
.upgrade h3{font-family:var(--font-display);font-size:14px;text-transform:uppercase;color:var(--text);margin-bottom:6px}
.upgrade p{font-size:12px;color:var(--text-2);margin:4px 0 14px}
.upgrade .btn{box-sizing:border-box;display:flex;width:100%;justify-content:center;align-items:center;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.02em;text-transform:uppercase;background:var(--accent);color:var(--bg);padding:10px 16px;clip-path:polygon(var(--cut-btn) 0,100% 0,100% calc(100% - var(--cut-btn)),calc(100% - var(--cut-btn)) 100%,0 100%,0 var(--cut-btn));text-decoration:none;filter:drop-shadow(2px 2px 0 #000);transition:transform .1s ease,filter .1s ease}
.upgrade .btn:hover{background:var(--accent-2);color:var(--bg);transform:translate(1px,1px);filter:drop-shadow(1px 1px 0 #000)}

/* ---------- shell: left rail + main (legacy, unused by current template) ---------- */
.shell{display:flex;width:100%;min-height:100vh}
.rail{width:208px;flex:none;box-sizing:border-box;border-right:2px solid var(--line);background:var(--surface);display:flex;flex-direction:column;padding:18px 12px;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail-brand{padding:6px 8px 20px;margin-bottom:6px;border-bottom:2px solid var(--line)}
.rail-brand-word{font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--text);font-family:var(--font-display)}
.rail-brand-word span{color:var(--accent)}
.rail-brand-word::before{content:"[";color:var(--accent);margin-right:1px}
.rail-brand-word::after{content:"]";color:var(--accent);margin-left:1px}
.rail-item{display:flex;align-items:center;gap:11px;padding:9px 10px;color:var(--text-dim);font-size:12px;font-weight:700;font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase;border-left:3px solid transparent}
.rail-item i{width:16px;flex:none;text-align:center;opacity:.8}
.rail-item:hover{color:var(--text);background:var(--surface-2)}
.rail-item.active{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent)}
.rail-item .count{margin-left:auto;font-size:10px;font-family:var(--mono);color:var(--text-faint);background:var(--surface-2);padding:1px 6px}
.rail-gap{flex:1;min-height:14px}
.rail-foot{padding-top:14px;border-top:2px solid var(--line)}
.rail-user{display:flex;align-items:center;gap:9px;padding:8px}
.rail-user:hover{background:var(--surface-2)}
.rail-user .av{width:28px;height:28px;flex:none;position:relative;display:inline-block}
.rail-user .who b{font-size:12.5px;font-weight:600;color:var(--text)}

.main{width:100%}
#navnotifications{position:relative}
.icon-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);position:relative}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
#notifications-badge[data-after-content]:not([data-after-content="0"])::after{
  content:attr(data-after-content);position:absolute;top:-4px;right:-6px;background:var(--danger);
  color:var(--bg);font-size:9px;font-weight:800;line-height:1;padding:2px 4px;min-width:13px;text-align:center;
}
.nc-notif-panel{
  position:absolute;top:100%;right:0;margin-top:10px;width:280px;max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  clip-path:polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
  box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:50;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.nc-notif-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.nc-notif-panel-hd{padding:10px 14px;font-size:11px;font-weight:700;font-family:var(--font-display);color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);background:var(--surface-2)}
.nc-notif-panel-body{padding:14px;font-size:13px;line-height:1.6;color:var(--text-dim);max-height:240px;overflow-y:auto}
.nc-notif-panel-body strong{color:var(--text)}

.content{max-width:1160px;margin:0 auto;padding:24px 24px 60px;min-width:0}
.main,#brdmain,.pun .block,.pun .blockform,.pun .block2col,.idx-grid{min-width:0}

/* ---------- status line (was #brdwelcome) ---------- */
.status-line{
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;
	font-size:12px;color:var(--text-faint);font-family:var(--mono);
	background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
	clip-path:polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
	padding:12px 16px;margin-bottom:18px;
}
.status-line .sl-guest{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:11px}
.status-left,.status-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.status-left li,.status-right li{display:flex;align-items:center}
.status-line strong{color:var(--text);font-weight:700}
.status-line a{color:var(--accent)}
.status-line a:hover{color:var(--accent-2)}
.status-line .reportlink,.status-line .maintenancelink{font-family:var(--font-display);font-size:10.5px;letter-spacing:.02em;text-transform:uppercase}
.status-line .reportlink a,.status-line .maintenancelink a{color:var(--danger)}
.sl-user span{font-size:11px;letter-spacing:.02em}
.sl-premium{display:flex;align-items:center;gap:9px}
.sl-premium-until{color:var(--text-faint);font-size:11px}
.sl-cta{font-family:var(--font-display);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)!important;padding:3px 9px;background:var(--accent-soft);clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.sl-cta:hover{background:var(--accent);color:var(--bg)!important}
.status-right li a{
	display:inline-flex;font-family:var(--font-display);font-size:10px;letter-spacing:.03em;text-transform:uppercase;
	color:var(--text-faint)!important;background:var(--surface-2);padding:5px 11px;
	clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm));
}
.status-right li a:hover{color:var(--text)!important;background:var(--line)}

/* ---------- notice bars / announcement ---------- */
.notice-bar{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:14px;font-size:13.5px}
.notice-bar a{color:var(--accent);font-weight:500}
#announce{margin-bottom:16px}
#announce .hd{display:none}
#announce .box{
	background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);
	clip-path:polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
}
#announce .inbox{padding:16px 18px}
#announce .inbox::before{content:"Announcement";display:block;font-family:var(--font-display);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
#announce .usercontent{color:var(--text-dim);font-size:13px;line-height:1.6}
#announce .usercontent strong{color:var(--text);font-size:14px;font-weight:700}
#announce .usercontent p{margin:0 0 6px}
#announce .usercontent p:last-child{margin-bottom:0}
#announce .usercontent br+br{display:none}

/* ---------- generic card system ---------- */
.pun .block,.pun .blocktable,.pun .blockform,.pun .blockmenu{
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  clip-path:polygon(0 0, calc(100% - var(--cut-xl)) 0, 100% var(--cut-xl), 100% 100%, var(--cut-xl) 100%, 0 calc(100% - var(--cut-xl)));
  margin-bottom:16px;
}
.pun .block>h2,.pun .blocktable>h2,.pun .blockform>h2,.pun .blockmenu>h2,.pun .blockpost>h2{
  padding:12px 16px;font-size:12.5px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line);background:var(--surface-2);
  font-family:var(--font-display);letter-spacing:.03em;text-transform:uppercase;margin:0;
}
.pun .block>h2 span,.pun .blocktable>h2 span,.pun .blockform>h2 span,.pun .blockmenu>h2 span,.pun .blockpost>h2 span{color:var(--text);font-weight:700}
.pun .blockpost .hd{background:var(--surface-2);border-bottom:1px solid var(--line)}
.pun .blockpost>h2 a{color:var(--text)}
.pun .blockpost>h2 .conr{float:right;color:var(--text-dim);font-weight:600}
.pun .box{background:transparent}
.pun .inbox,.pun .inform{padding:16px}
.pun .infldset{padding:0}

/* ---------- tables ---------- */
.pun table{width:100%;border-collapse:collapse}
.pun thead th{text-align:left;padding:9px 16px 10px;font-size:10.5px;font-weight:700;font-family:var(--font-display);color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.pun thead th.tc2,.pun thead th.tc3{text-align:center;width:80px}
.pun tbody tr{border-bottom:1px dashed var(--line);transition:background-color .15s ease}
.pun tbody tr:last-child{border-bottom:0}
.pun tbody tr:hover{background:var(--surface-2)}
.pun tbody td{padding:12px 16px;vertical-align:middle}
.pun td.tc2,.pun td.tc3{text-align:center;font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;font-family:var(--mono)}
.pun td.tcmod{padding:12px 4px}

.pun td.tcl ul{display:flex;align-items:center;gap:12px}
.pun td.tcl li.rowlist{display:flex;align-items:center}
.pun .icon,.pun .icon-new{width:7px;height:7px;flex:none;background:var(--text-faint);display:block;position:relative;margin:0 8px;align-self:center;border-radius:1px}
.pun .icon.inone{opacity:.4}
.pun .icon::before{display:none}
.pun .icon-new{background:var(--accent)}

.pun .tclcon h3{font-size:14px;font-weight:600;display:inline}
.pun .tclcon h3 a{color:var(--text)}
.pun .tclcon h3 a:hover{color:var(--accent)}
.pun .tclcon .ipost{color:var(--accent)}
.pun .forumdesc{font-size:12.5px;color:var(--text-faint);margin-top:3px;display:block}
.pun .modlist{font-size:11.5px;color:var(--text-faint);margin-top:3px}
.pun .modlist a{color:var(--text-faint)}

.pun .newtext,.pun .stickytext,.pun .movedtext,.pun .closedtext,.pun .polltext,.pun .redirtext{
  display:inline-block;font-size:9.5px;font-weight:700;font-family:var(--font-display);padding:2px 7px;margin-right:6px;vertical-align:1px;text-transform:uppercase;letter-spacing:.02em;
  clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs));
}
.pun .newtext{background:var(--accent-soft);color:var(--accent)}
.pun .newtext a{color:var(--accent)}
.pun .stickytext{background:var(--gold-soft);color:var(--gold)}
.pun .closedtext,.pun .movedtext{background:var(--surface-2);color:var(--text-faint)}
.pun .polltext{background:var(--accent-soft);color:var(--accent)}
.pun .redirtext{background:none;padding:0;color:var(--text-faint);font-weight:400;clip-path:none}
.pun .pagestext{font-size:12px;color:var(--text-faint)}
.pun .pagestext a{color:var(--accent)}

.pun td.tcr{font-size:12.5px;line-height:1.6;color:var(--text-faint)}
.pun td.tcr a{color:var(--text-dim);font-weight:500}
.pun td.tcr a:hover{color:var(--accent)}
.pun .byuser{display:block;font-size:11.5px;color:var(--text-faint)}
.pun .byuser a{color:var(--text-faint);font-size:inherit}

/* ---------- board info / online-offline list ---------- */
#brdstats .inbox{padding:0}
#brdstats dl{margin:0;padding:14px 16px 4px}
#brdstats dl.conr{float:none;padding-bottom:0}
#brdstats dl.conr dt{display:none}
#brdstats dl.conl dt{font-size:11px;color:var(--text-faint);margin-bottom:8px;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em}
#brdstats dd{font-size:13px;color:var(--text-faint);padding:2px 0;font-family:var(--mono)}
#brdstats dd strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
#onlinelist{padding:10px 16px 14px;clear:both}
#onlinelist dt{display:inline;font-size:11px;color:var(--text-faint);font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em}
#onlinelist dd{display:inline;font-size:13px}
#onlinelist dd a{color:var(--accent)}
#offlinelist{padding:10px 16px 16px;border-top:1px solid var(--line)}
#offlinelist dt{color:var(--text-faint)!important;font-weight:700;font-size:11px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em}
#offlinelist dd{font-size:13px;line-height:2.1}
#offlinelist dd a,#offlinelist dd span{opacity:.75!important}

/* ---------- usergroup colours ---------- */
.usergroup-1,a.usergroup-1{color:var(--accent)!important}
.usergroup-2,a.usergroup-2{color:#5b8fc2!important}
.usergroup-3,a.usergroup-3{color:var(--danger)!important}
.usergroup-4,a.usergroup-4{color:var(--text-faint)!important}

/* ---------- crumbs / pagination ---------- */
.pun .linkst,.pun .linksb{background:transparent;margin-bottom:14px}
.pun .linksb{margin-top:14px;margin-bottom:0}
.pun .crumbsplus{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0}
.pun .crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--text-faint)}
.pun .crumbs li{display:flex;align-items:center;gap:6px}
.pun .crumbs span{color:var(--text-faint)}
.pun .crumbs a{color:var(--text-faint)}
.pun .crumbs strong a{color:var(--text-dim)}
.pun .crumbs strong{color:var(--text);font-family:var(--font-display);font-size:16px;letter-spacing:.01em;text-transform:uppercase}
.nc-empty{font-family:var(--font-display);font-size:12px;letter-spacing:.02em;color:var(--text-faint);padding:16px 0}

.pun .pagepost{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px}
.pun .pagepost:empty{padding:0}
.pun .pagelink,.pun .pages-label{font-size:12.5px;color:var(--text-faint)}
.pun .pages-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.pun .pagelink a,.pun .pagelink strong{padding:5px 11px;font-weight:700;font-size:12px;font-family:var(--font-display);clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.pun .pagelink strong.item1{background:var(--accent);color:var(--bg)}
.pun .pagelink a{background:var(--surface-2);border:1px solid var(--line);color:var(--text-faint)}
.pun .pagelink a:hover{color:var(--text)}
.pun .pagelink .spacer{color:var(--text-faint);padding:0 2px}

/* ---------- buttons ---------- */
.pun .postlink a,.pun a.button,.pun input[type="submit"],.pun input[type="button"],.pun button,.pun .nc-btn{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase;
  padding:9px 16px;border:1px solid transparent;cursor:pointer;
  clip-path:polygon(var(--cut-btn) 0,100% 0,100% calc(100% - var(--cut-btn)),calc(100% - var(--cut-btn)) 100%,0 100%,0 var(--cut-btn));
  transition:transform .1s ease, filter .1s ease, background-color .15s ease;
  background:var(--accent);color:var(--bg);
  filter:drop-shadow(3px 3px 0 #000);
}
.pun .postlink a:hover,.pun a.button:hover,.pun input[type="submit"]:hover,.pun button:hover{background:var(--accent-2);color:var(--bg);transform:translate(2px,2px);filter:drop-shadow(1px 1px 0 #000)}
.pun .button,.pun input[type="reset"]{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important}
.pun .button:hover{background:var(--line)!important;color:var(--text)!important}
.pun .subscribelink,.pun .actions{font-size:12.5px;color:var(--text-faint)}
.pun .subscribelink a,.pun .actions a{color:var(--accent)}
.pun .postlink.actions a{color:#fff}

/* ---------- forms ---------- */
.pun fieldset{margin:0 0 18px;min-width:0}
.pun fieldset:last-child{margin-bottom:0}
.pun .infldset{min-width:0}
.pun .infldset p,.pun .infldset label,.pun legend{overflow-wrap:break-word;word-break:break-word}
.pun legend{font-size:11px;color:var(--text-faint);padding:0;margin-bottom:10px;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em}
.pun .infldset label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pun .infldset label:last-child{margin-bottom:0}
.pun .infldset label strong{font-size:11.5px;color:var(--text-faint);font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.pun .infldset label strong span{color:var(--accent);font-weight:400;font-size:11.5px;margin-left:4px;text-transform:none;font-family:var(--font)}
.pun .infldset label.conl{float:none;display:flex}
.pun .infldset label:has(> select),.pun .infldset label:has(> input[type="text"]),.pun .infldset label:has(> input[type="password"]),.pun .infldset label:has(> input[type="email"]),.pun .infldset label:has(> input[type="number"]),.pun .infldset label:has(> textarea){
	font-size:11.5px;color:var(--text-faint);font-weight:700;letter-spacing:.02em;
}
.pun .infldset label:has(> select) select,.pun .infldset label:has(> input) input,.pun .infldset label:has(> textarea) textarea{
	font-weight:400;color:var(--text);font-size:13.5px;letter-spacing:normal;
}
.pun .infldset p{font-size:12.5px;color:var(--text-faint);margin:8px 0}
.pun .infldset p.warntext{color:var(--danger);font-weight:500}

.pun input[type="text"],.pun input[type="password"],.pun input[type="email"],.pun input[type="number"],
.pun textarea,.pun select{
  box-sizing:border-box;background:var(--surface);border:2px solid var(--line);padding:9px 12px;
  color:var(--text);font-family:var(--font);font-size:13.5px;width:100%;max-width:340px;transition:border-color .15s ease;
}
.pun select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238f6fe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:13px;padding-right:36px;cursor:pointer;
}
.pun select:hover{border-color:var(--text-faint)}
.pun .longinput{max-width:none!important}
.pun textarea{max-width:none;width:100%;min-height:150px;line-height:1.6;resize:vertical}
.pun input:focus,.pun textarea:focus,.pun select:focus{outline:none;border-color:var(--accent)}
.pun input[type="checkbox"],.pun input[type="radio"]{width:15px;height:15px;accent-color:var(--accent);margin-right:8px}
.pun .rbox label{display:flex;align-items:center;font-size:13px;color:var(--text-dim);flex-direction:row!important}
.pun .buttons{margin-top:6px}
.pun #time_zone{max-width:280px}

.pun .bblinks{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;font-size:12px}
.pun .bblinks a{background:var(--surface-2);border:1px solid var(--line);color:var(--text-faint);padding:5px 9px}
.pun .bblinks a:hover{color:var(--text);background:var(--line)}

.pun .error-info{background:var(--danger-soft);border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);border-left:3px solid var(--danger)}
.pun .error-list li{color:var(--danger);font-size:13px;padding:2px 0}
.pun #posterror{border-color:color-mix(in srgb, var(--danger) 35%, transparent)}
.pun #posterror>h2{background:var(--danger-soft);color:var(--danger)}

/* ---------- posts ---------- */
.pun .postbody{display:grid;grid-template-columns:150px 1fr}
.pun .postleft{padding:16px;border-right:1px solid var(--line);text-align:center}
.pun .postavatar{margin-bottom:10px}
.pun .postleft dt{font-size:13.5px;font-weight:700;color:var(--text)}
.pun .postleft dt a{color:var(--text)}
.pun .usertitle{margin:5px 0 10px;font-size:10px;color:var(--accent);font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.pun .usercontacts{font-size:11px;color:var(--text-faint);border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.pun .usercontacts li{padding:3px 0}
.pun .usercontacts a{color:var(--accent)}

.pun .postright{padding:16px}
.pun .postmsg{color:var(--text-dim);font-size:13.5px;line-height:1.7}
.pun .postmsg p{padding:0 0 12px}
.pun .postmsg p:last-child{padding-bottom:0}
.pun .postmsg a{color:var(--accent)}
.pun .postmsg code{background:var(--surface-2);padding:2px 6px;color:var(--text)}
.pun .postsignature{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:12px;color:var(--text-faint)}
.pun p.postedit{font-size:11px;color:var(--text-faint);margin-top:10px;font-style:normal}

.pun .postfoot{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.pun .postfootleft{font-size:12px;color:var(--text-faint);font-family:var(--mono)}
.pun .postfootright{margin-left:auto;display:flex;gap:6px}
.pun .postfootright ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.pun .postfootright li{display:flex}
.pun .postfootright a,.pun .postlike,.pun .postunlike,.pun .postreport,.pun .postdelete,.pun .postedit a,.pun .postquote{
  font-size:10.5px;font-weight:700;font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-faint);padding:5px 11px;background:var(--surface);
  clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs));
}
.pun .postfootright a:hover{color:var(--text);background:var(--line)}

.pun .blockpost{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);margin-bottom:14px}
.pun .blockpost.firstpost{border-color:var(--line);border-left-color:var(--gold)}

/* ---------- profile ---------- */
.pun .block2col{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.pun .block2col>.blockmenu{grid-column:1;grid-row:1}
.pun .block2col>.block,.pun .block2col>.blockform{grid-column:2}
.pun .block2col>.clearer{display:none}
.pun .blockmenu{margin-bottom:0}
.pun .blockmenu ul li{border-bottom:1px solid var(--line)}
.pun .blockmenu ul li:last-child{border-bottom:0}
.pun .blockmenu ul a{display:block;padding:10px 14px;font-size:12px;color:var(--text-faint);font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;border-left:3px solid transparent}
.pun .blockmenu ul li.isactive a{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent)}
.pun .blockmenu ul a:hover{color:var(--text)}

.pun .fakeform dl{display:flex;flex-direction:column;gap:0}
.pun .fakeform dt{font-size:10px;color:var(--text-faint);font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;padding-top:14px}
.pun .fakeform dt:first-child{padding-top:0}
.pun .fakeform dd{font-size:13.5px;color:var(--text);padding:4px 0 13px;margin:0;border-bottom:1px dashed var(--line)}
.pun .fakeform dd:last-child{border-bottom:0;padding-bottom:0}
.pun .fakeform dd a{color:var(--accent)}
.pun .fakeform dd a:hover{color:var(--accent-2)}

/* ---------- avatars: clipped corner, flat fill, no gradients ---------- */
.nc-avatar{clip-path:polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%);object-fit:cover;border:1px solid var(--line);background:var(--surface-2)}
.postavatar .nc-avatar{width:64px;height:64px}
.useravatar .nc-avatar{width:80px;height:80px}
.nc-mini-avatar{display:flex;align-items:center;gap:8px}
.nc-mini-avatar .nc-avatar{width:22px;height:22px;flex:none}
.rail-user .av .nc-avatar{width:28px;height:28px}
.nc-avatar-fallback{clip-path:polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%);display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);font-weight:800;font-family:var(--font-display)}
.postavatar .nc-avatar-fallback{font-size:22px}
.useravatar .nc-avatar-fallback{font-size:28px}
.nc-mini-avatar .nc-avatar-fallback{font-size:10px}
.rail-user .av .nc-avatar-fallback{font-size:11px}

/* ---------- status dot ---------- */
.nc-status-dot{display:inline-block;width:8px;height:8px;background:var(--text-faint);flex:none;transform:rotate(45deg)}
.nc-status-dot.nc-online{background:var(--online)}
.postavatar,.useravatar,.rail-user .av{position:relative;display:inline-block}
.postavatar .nc-status-dot,.useravatar .nc-status-dot{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border:2px solid var(--surface)}
.useravatar .nc-status-dot{right:0;bottom:0}
.rail-user .av .nc-status-dot{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border:2px solid var(--surface)}

/* ---------- profile hero ---------- */
.nc-profile-hero{display:flex;gap:16px;padding:18px;border-bottom:1px solid var(--line);align-items:flex-start;flex-wrap:wrap}
.nc-profile-hero-avatar{flex:none}
.nc-profile-hero-info{min-width:0}
.nc-profile-hero-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.nc-profile-hero-badges{margin-bottom:8px}
.nc-sub-badge{display:inline-block;font-size:10px;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;padding:3px 9px;clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.nc-sub-badge.nc-sub-active{background:var(--gold-soft);color:var(--gold)}
.nc-sub-badge.nc-sub-inactive{background:var(--surface-2);color:var(--text-faint)}
.nc-profile-hero-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-faint);font-family:var(--mono)}
@media (max-width:600px){.nc-profile-hero{padding:14px}}

/* ---------- payment / buy page ---------- */
/* .nc-buy is the page wrapper on payment.php but a BUTTON class in the store.
   Unscoped, this stripped the padding off every store buy button and the
   chamfer then cut into the label. */
.pun .nc-buy:not(button){padding:0!important}
.pun .nc-game-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.pun .nc-game-tabs a{padding:7px 14px;font-family:var(--font-display);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;background:var(--surface-2);color:var(--text-faint);clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm))}
.pun .nc-game-tabs a.isactive{background:var(--accent);color:var(--bg)}
.pun .nc-upgrade{border:1px solid var(--line);border-top:3px solid var(--accent);padding:14px 16px;margin-bottom:10px;background:var(--surface-2)!important}

/* ---------- footer ---------- */
#brdfooter{margin-top:24px}
#brdfooter>h2{display:none}
/* The forum name is already in the breadcrumb directly above this block, so the
   heading bar just repeated it on every forum page. Same treatment the footer
   heading already gets. */
#vf>h2{display:none}
#brdfooter .box{background:transparent;border:0}
#brdfooter .inbox,#brdfooternav{padding:16px 4px 0;border-top:1px solid var(--line);color:var(--text-faint);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}
#brdfooter .conl{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
#brdfooter p{margin:0;font-size:10.5px;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
#brdfooter ul{display:contents;list-style:none;margin:0;padding:0}
#brdfooter li{display:flex}
#brdfooter a{
	color:var(--text-faint);font-size:10px;font-family:var(--font-display);letter-spacing:.03em;text-transform:uppercase;
	background:var(--surface-2);padding:5px 11px;clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm));
}
#brdfooter a:hover{color:var(--text);background:var(--line)}

/* ---------- moderator control bar (viewforum/viewtopic footer) ---------- */
#modcontrols{padding:12px 16px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);margin-bottom:14px}
#modcontrols dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
#modcontrols dt{font-family:var(--font-display);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint)}
#modcontrols dd{display:flex;gap:8px;flex-wrap:wrap;margin:0}
#modcontrols dd span{display:flex;gap:8px}
#modcontrols a{
	color:var(--accent);font-size:11px;font-weight:600;background:var(--surface);border:1px solid var(--line);
	padding:4px 10px;clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs));
}
#modcontrols a:hover{color:var(--text);border-color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .navtabs .rail-label{display:none}
  .navtabs .rail-item{padding:9px 10px}
  .navtabs .rail-item .count{display:none}
}
@media (max-width:820px){
  .pun td.tcr,.pun thead th.tcr{display:none}
  .pun .postbody{grid-template-columns:1fr}
  .pun .postleft{border-right:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;text-align:left}
  .pun .postavatar{margin:0}
  .pun .postavatar .nc-avatar{width:44px;height:44px}
  .pun .usercontacts{display:none}
  .pun .block2col{grid-template-columns:1fr}
  .content{padding:18px 18px 40px}
  .topbar-inner{padding:0 16px}
}
@media (max-width:480px){
  .content{padding:16px 14px 36px}
  .pun .block>h2,.pun .blocktable>h2,.pun .blockform>h2,.pun .blockmenu>h2{padding:12px 14px}
  .pun .inbox,.pun .inform{padding:14px}
}

.pun .nc-crypto-form{display:inline-flex;margin:0}
.pun .nc-btn-crypto{background:var(--surface-2)!important;color:var(--text-dim)!important;border:1px solid var(--line)!important;clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.pun .nc-btn-crypto:hover{background:var(--line)!important;color:var(--text)!important;border-color:var(--accent)!important}

/* ---------- tickets ---------- */
.tstatus{display:inline-block;font-size:9.5px;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;padding:2px 8px;color:var(--bg);clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.tstatus-open{background:var(--online)}
.tstatus-claimed{background:var(--accent);color:#fff}
.tstatus-awaiting{background:var(--gold)}
.tstatus-closed{background:var(--surface-2);color:var(--text-faint)}
.tk-post{padding:14px 16px}
.tk-byline{font-size:12.5px}
.tk-author{font-weight:700;color:var(--text)}
.tk-group{font-size:10px;color:var(--text-faint);margin-left:6px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.tk-time{color:var(--text-faint);font-size:11px;margin-left:12px;font-family:var(--mono)}
.tk-claimed{font-size:11px;color:var(--accent);padding-top:6px}
.tk-message{padding:12px 0 0;color:var(--text-dim);font-size:13.5px;line-height:1.7}
.tk-admin-actions{padding:12px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tk-danger-btn.button{color:var(--danger)!important;border-color:color-mix(in srgb, var(--danger) 40%, transparent)!important}
.tk-catrow{padding:14px 16px;border-bottom:1px solid var(--line)}
.tk-catrow:last-child{border-bottom:0}
.tk-catname{font-weight:700;color:var(--text)}
.tk-catdesc{font-size:11.5px;color:var(--text-faint);padding-top:3px}
.tk-stats{padding:14px 16px;display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--text-faint)}
.tk-stats strong{color:var(--text);font-family:var(--mono);margin-right:4px}
.tk-stat-open strong{color:var(--online)}
.tk-stat-claimed strong{color:var(--accent)}
.tk-stat-awaiting strong{color:var(--gold)}
.tk-stat-closed strong{color:var(--text-faint)}
.tk-filterblock{margin-bottom:16px}
.tk-filters{padding:10px 14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tk-filter-label{font-size:11px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);margin-right:4px}
.tk-filters a{font-size:11.5px;color:var(--text-faint);padding:4px 10px;background:var(--surface-2)}
.tk-filters a.active{color:var(--accent);background:var(--accent-soft);font-weight:700}
.tk-nolink{text-decoration:none}
.tk-group-sm{font-size:10px;color:var(--text-faint)}
.tk-dash{color:var(--text-faint)}

#punredirect,#punmaint,#punhelp{width:auto!important;max-width:640px;margin:60px auto}
#punredirect .punwrap,#punmaint .punwrap,#punhelp .punwrap{padding-top:0}
#punredirect #brdmain,#punmaint #brdmain,#punhelp #brdmain{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);overflow:hidden}
#punredirect #brdmain .block,#punredirect #brdmain .blockform{border:0;border-top:0;clip-path:none;margin:0}

@keyframes nc-page-fade-in{from{opacity:0}to{opacity:1}}
body{animation:nc-page-fade-in .15s ease-out}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s;animation-timing-function:ease-out}

/* ---- name-effect cosmetics (2TAP Store, Names category) ----
   Rendered by colorize_group() as nc-fx-{effect_key} alongside the group's
   gid{N} class. The inline gid{N} color rule (generated per-group, cached in
   cache_colorize_groups.php) is emitted in <head> AFTER this stylesheet, so on
   an equal-specificity color conflict it would normally win -- these use
   !important specifically to guarantee the purchased effect always wins. */
/* --- name-effect base -------------------------------------------------------
   A purchased name style has to look the same everywhere the name is printed.
   The effect rules below only declare what makes each style distinctive, so
   everything they leave out was inherited from whatever container the name
   happened to sit in: .nc-profile-hero-name forces uppercase + weight 700, the
   store card forces neither, and .gid{N} adds bold on top of both. Bloodline
   came out as smeared uppercase on a profile and clean lowercase in the store
   -- one class, two looks.

   Neutralise those inherited properties here, ahead of the effect rules, so an
   effect that actually wants uppercase or italics still declares it and wins on
   source order. font-weight needs !important because .gid{N} lands on this very
   span and its <style> block is emitted after this stylesheet (header.php:195).
   font-size and colour stay inherited on purpose: the container should still
   decide how big the name is, and every effect sets its own colour. */
[class*="nc-fx-"]{
	text-transform:none;
	letter-spacing:normal;
	font-style:normal;
	font-variant:normal;
	text-shadow:none;
	font-weight:400!important;
}

.nc-fx-sus_red{color:var(--danger)!important}
.nc-fx-ghost{color:#c7c2d4!important}
.nc-fx-rage_gradient{background:linear-gradient(90deg,var(--danger),var(--gold));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nc-fx-gradshift 3.5s ease-in-out infinite}
.nc-fx-rage_prefix{color:var(--accent-2)!important;text-shadow:0 0 10px var(--accent)}
.nc-fx-certified_legit{color:var(--danger)!important;font-weight:400!important;text-decoration:line-through!important}
.nc-fx-prism{background:linear-gradient(90deg,var(--danger),var(--gold),var(--online),#5eb3f0,var(--accent),var(--danger));background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nc-fx-prismflow 6s linear infinite}
.nc-fx-neon{color:var(--accent-2)!important;animation:nc-fx-glowpulse 2.2s ease-in-out infinite}
.nc-fx-chroma_cycle{background:linear-gradient(90deg,#ff4d67,#ffcf4d,#4ade80,#5eb3f0,#8f6fe0,#ff4d67);background-size:400% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nc-fx-chromaspin 2.4s linear infinite}
.nc-fx-molten{color:var(--gold)!important;animation:nc-fx-emberflicker 1.6s ease-in-out infinite}
.nc-fx-holo{background:linear-gradient(115deg,var(--silver) 0%,var(--silver) 38%,#fff 46%,#5eb3f0 50%,#fff 54%,var(--silver) 62%,var(--silver) 100%);background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nc-fx-holosweep 3.2s ease-in-out infinite}
.nc-fx-top_frag{background:linear-gradient(115deg,var(--gold) 0%,var(--gold) 40%,#fff 50%,var(--gold) 60%,var(--gold) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nc-fx-holosweep 2.6s ease-in-out infinite,nc-fx-topfragpulse 2.6s ease-in-out infinite}
@keyframes nc-fx-gradshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes nc-fx-prismflow{to{background-position:200% 50%}}
@keyframes nc-fx-glowpulse{0%,100%{text-shadow:0 0 6px var(--accent),0 0 2px var(--accent)}50%{text-shadow:0 0 18px var(--accent),0 0 6px var(--accent-2)}}
@keyframes nc-fx-chromaspin{to{background-position:300% 50%}}
@keyframes nc-fx-emberflicker{0%,45%,55%,100%{text-shadow:0 0 6px var(--gold),0 0 2px #fff}48%,52%{text-shadow:0 0 16px var(--gold),0 0 5px #fff}}
@keyframes nc-fx-holosweep{0%{background-position:-120% 0}100%{background-position:220% 0}}
@keyframes nc-fx-topfragpulse{0%,100%{text-shadow:0 0 8px var(--gold),0 0 2px #fff}50%{text-shadow:0 0 22px var(--gold),0 0 8px #fff,0 0 2px var(--accent-2)}}
@media (prefers-reduced-motion: reduce){.nc-fx-rage_gradient,.nc-fx-prism,.nc-fx-neon,.nc-fx-chroma_cycle,.nc-fx-molten,.nc-fx-holo,.nc-fx-top_frag{animation:none}}

/* ---- themed scrollbar to match the dark theme ---- */
*{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--bg);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:var(--bg)}

/* ---- Kingpin: the one flagship name effect ---- */
.nc-fx-kingpin{font-family:'Cinzel Decorative',var(--font-display),serif!important;font-weight:900!important;letter-spacing:.03em;background:linear-gradient(180deg,#f4f2f8 0%,#cfc8de 20%,#a488e8 45%,#8f6fe0 55%,#cfc8de 80%,#f4f2f8 100%);background-size:100% 250%;-webkit-background-clip:text;background-clip:text;color:transparent!important;position:relative;display:inline-block;animation:nc-fx-kingpinShimmer 4s ease-in-out infinite,nc-fx-kingpinGlow 2.4s ease-in-out infinite}
.nc-kingpin-stage .nc-fx-kingpin::before{content:'\1F451';position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-size:26px;color:initial;-webkit-text-fill-color:initial;-webkit-background-clip:initial;background-clip:initial;background:none;filter:drop-shadow(0 0 8px rgba(143,111,224,.85));animation:nc-fx-kingpinGlow 2.4s ease-in-out infinite}
.nc-kingpin-hero{background:radial-gradient(ellipse at center, rgba(143,111,224,.14), var(--surface) 72%);border:1px solid var(--line);border-top:3px solid var(--accent);text-align:center;position:relative;overflow:hidden;clip-path:polygon(0 0, calc(100% - var(--cut-xl)) 0, 100% var(--cut-xl), 100% 100%, var(--cut-xl) 100%, 0 calc(100% - var(--cut-xl)));margin-bottom:16px}
.nc-kingpin-tag{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);padding:16px 0 0}
.nc-kingpin-stage{padding:52px 20px 30px}
.nc-kingpin-stage .nc-fx-kingpin{font-size:clamp(28px,5vw,52px)}
.nc-kingpin-foot{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 20px 24px;flex-wrap:wrap}
.nc-kingpin-foot .nc-iprice{font-size:16px;font-family:var(--mono);color:var(--text);font-weight:700;display:flex;align-items:center;gap:6px}

/* ---------- Badges: rarity-tiered image grid ---------- */
.nc-badge-dot{width:8px;height:8px;border-radius:50%;flex:none}
.nc-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.nc-badge-card{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--tier-color,var(--accent));padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.nc-badge-img{width:84px;height:84px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 60%,transparent 75%);border-radius:50%}
.nc-badge-img img{max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--tier-color,var(--accent)))}
.nc-badge-name{font-family:var(--font-display);font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.nc-badge-card .nc-iprice{font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px}
.nc-badge-card .nc-isupply{font-size:10.5px;color:var(--text-faint)}

/* Sitewide equipped-badge icon next to a username */
.nc-uid-badge{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:4px}
.nc-uid-tag{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--text-faint);margin-left:4px;vertical-align:1px}
.nc-viewall{display:inline-block;margin:8px 0 16px 20px;font-size:12px;font-weight:600;color:var(--accent,#9b8cff)}
.nc-viewall:hover{text-decoration:underline}
.nc-uid-badge img{width:100%;height:100%;object-fit:contain}

/* ---------- Names: rarity-tiered store grid ---------- */
.nc-rarity-section{margin-bottom:34px}
.nc-rarity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.nc-rarity-title{font-family:var(--font-display);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.15em}
.nc-rarity-count{font-size:11px;color:var(--text-faint);font-weight:600}
.nc-rarity-common .nc-rarity-title{color:#9aa5b1}
.nc-rarity-uncommon .nc-rarity-title{color:var(--online)}
.nc-rarity-rare .nc-rarity-title{color:#5eb3f0}
.nc-rarity-epic .nc-rarity-title{color:#c084fc}
.nc-rarity-mythic .nc-rarity-title{color:var(--gold)}
.nc-rarity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nc-rarity-card{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 11px 11px;display:flex;flex-direction:column;gap:9px;justify-content:space-between;min-height:80px;transition:transform .15s ease,border-color .15s ease}
.nc-rarity-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.nc-rarity-preview{font-size:15px;min-height:20px;display:flex;align-items:center;text-align:left;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-rarity-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}
.nc-rarity-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.nc-rarity-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.05)}
.nc-rarity-common .nc-rarity-badge{color:#9aa5b1}
.nc-rarity-uncommon .nc-rarity-badge{color:var(--online);border:1px solid rgba(74,222,128,.25)}
.nc-rarity-rare .nc-rarity-badge{color:#5eb3f0;border:1px solid rgba(94,179,240,.25)}
.nc-rarity-epic .nc-rarity-badge{color:#c084fc;border:1px solid rgba(192,132,252,.25)}
.nc-rarity-mythic .nc-rarity-badge{color:var(--gold);border:1px solid rgba(255,207,77,.3);background:var(--gold-soft)}
.nc-rarity-card .nc-iprice{font-size:12px;font-family:var(--mono);color:var(--text);font-weight:700;display:flex;align-items:center;gap:5px}

/* ---------- Names: 40 purchasable styles, 5 rarity tiers ----------
   Text-only styling everywhere (color / gradient-clip / text-shadow / font /
   letter-spacing / animation on those alone) - never a background box or a
   sized pseudo-element, so every style stays exactly the same footprint as
   plain text wherever a username renders sitewide. */

/* Common - flat color/weight/transform, no gradient, no animation */
.nc-fx-nf_c1{font-family:var(--font)!important;font-weight:300!important;color:#a1a1aa!important;letter-spacing:.12em;text-transform:uppercase}
.nc-fx-nf_c2{font-family:var(--font)!important;font-weight:400!important;color:#d4d4d8!important}
.nc-fx-nf_c3{font-family:var(--font)!important;font-weight:500!important;color:#94a3b8!important;letter-spacing:.06em;text-transform:uppercase}
.nc-fx-nf_c4{font-family:var(--mono)!important;color:#a3a3a3!important;font-size:1.08em}
.nc-fx-nf_c5{font-family:var(--font-display)!important;color:#71717a!important}
.nc-fx-nf_c6{font-family:Georgia,'Times New Roman',serif!important;font-weight:700!important;color:#a8a29e!important}
.nc-fx-nf_c7{font-family:var(--mono)!important;color:#cbd5e1!important}
.nc-fx-nf_c8{font-family:var(--font-display)!important;color:#71717a!important;text-transform:lowercase}

/* Uncommon - a bit more character, still flat color, no gradient */
.nc-fx-nf_u1{font-family:var(--font-display)!important;color:#e2e8f0!important;letter-spacing:.2em;text-transform:uppercase}
.nc-fx-nf_u2{font-family:var(--font-display)!important;color:#bbf7d0!important}
.nc-fx-nf_u3{font-family:Georgia,serif!important;font-style:italic!important;color:#fef08a!important}
.nc-fx-nf_u4{font-family:Georgia,serif!important;color:#f1f5f9!important;letter-spacing:.1em}
.nc-fx-nf_u5{font-family:var(--font)!important;font-weight:700!important;color:#93c5fd!important}
.nc-fx-nf_u6{font-family:Georgia,serif!important;font-style:italic!important;font-weight:600!important;color:#e9d5ff!important}
.nc-fx-nf_u7{font-family:var(--mono)!important;font-weight:700!important;color:#fca5a5!important}
.nc-fx-nf_u8{font-family:var(--font-display)!important;letter-spacing:.15em;color:#f3f4f6!important;text-transform:uppercase}

/* Rare - static gradient text or shadowed serif */
.nc-fx-nf_r1{font-family:var(--font)!important;font-weight:700!important;background:linear-gradient(180deg,#ffffff 0%,#64748b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r2{font-family:Georgia,serif!important;font-weight:700!important;letter-spacing:.04em;background:linear-gradient(135deg,#fef3c7 0%,#d97706 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r3{font-family:var(--font-display)!important;background:linear-gradient(180deg,#86efac 0%,#15803d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r4{font-family:Georgia,serif!important;font-weight:700!important;letter-spacing:.04em;color:#f8fafc!important;text-shadow:0 2px 4px rgba(0,0,0,.8)}
.nc-fx-nf_r5{font-family:var(--font-display)!important;background:linear-gradient(180deg,#ffffff 0%,#94a3b8 50%,#cbd5e1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r6{font-family:Georgia,serif!important;background:linear-gradient(180deg,#fed7aa 0%,#c2410c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r7{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:700!important;color:#38bdf8!important;letter-spacing:.04em}
.nc-fx-nf_r8{font-family:'UnifrakturMaguntia',var(--font-display),cursive!important;color:#f1f5f9!important;text-shadow:0 2px 8px rgba(0,0,0,.9)}

/* Epic - richer gradients using the self-hosted display faces */
.nc-fx-nf_e1{font-family:'Cinzel',var(--font-display),serif!important;font-weight:600!important;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,#e0e7ff 0%,#6366f1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_e2{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:900!important;letter-spacing:.06em;background:linear-gradient(90deg,#e9d5ff,#c084fc,#f472b6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_e3{font-family:Georgia,serif!important;font-style:italic!important;font-weight:700!important;background:linear-gradient(180deg,#ffffff 0%,#64748b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_e4{font-family:var(--mono)!important;letter-spacing:-.02em;color:#f43f5e!important}
.nc-fx-nf_e5{font-family:var(--font-display)!important;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,#fef08a 0%,#ca8a04 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_e6{font-family:var(--font-display)!important;background:linear-gradient(135deg,#a5f3fc 0%,#0284c7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_e7{font-family:'Cinzel',var(--font-display),serif!important;font-weight:900!important;color:#f8fafc!important;border-bottom:2px solid #6366f1;padding-bottom:1px}
.nc-fx-nf_e8{font-family:'UnifrakturMaguntia',var(--font-display),cursive!important;background:linear-gradient(180deg,#fca5a5 0%,#991b1b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}

/* Mythic - animated gradients, the showpiece tier */
.nc-fx-nf_m1{font-family:'Cinzel',var(--font-display),serif!important;font-weight:900!important;letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(90deg,#fff7ad,#ffa900,#764b00,#ffa900,#fff7ad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 4s linear infinite}
.nc-fx-nf_m2{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:900!important;letter-spacing:.06em;background:linear-gradient(90deg,#ffffff,#38bdf8,#6366f1,#38bdf8,#ffffff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 5s linear infinite}
.nc-fx-nf_m3{font-family:Georgia,serif!important;font-style:italic!important;font-weight:700!important;background:linear-gradient(90deg,#fbcfe8,#f43f5e,#be185d,#f43f5e,#fbcfe8);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 6s linear infinite}
.nc-fx-nf_m4{font-family:'Press Start 2P',var(--font-display),cursive!important;font-size:.72em;background:linear-gradient(90deg,#4ade80,#3b82f6,#a855f7,#4ade80);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 3s linear infinite}
.nc-fx-nf_m5{font-family:var(--font-display)!important;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(90deg,#ffffff 0%,#a1a1aa 50%,#ffffff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 3s linear infinite;filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}
.nc-fx-nf_m6{font-family:var(--font-display)!important;background:linear-gradient(90deg,#fef08a,#f97316,#dc2626,#f97316,#fef08a);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 4s linear infinite}
.nc-fx-nf_m7{font-family:var(--mono)!important;background:linear-gradient(90deg,#a5f3fc,#06b6d4,#0e7490,#a5f3fc);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 5s linear infinite}
.nc-fx-nf_m8{font-family:'UnifrakturMaguntia',var(--font-display),cursive!important;background:linear-gradient(90deg,#e9d5ff,#a855f7,#581c87,#a855f7,#e9d5ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 4s linear infinite}

@keyframes nc-nf-shift{to{background-position:200% center}}

@media (prefers-reduced-motion: reduce){
.nc-fx-nf_m1,.nc-fx-nf_m2,.nc-fx-nf_m3,.nc-fx-nf_m4,.nc-fx-nf_m5,.nc-fx-nf_m6,.nc-fx-nf_m7,.nc-fx-nf_m8
{animation:none}
}
@keyframes nc-fx-kingpinShimmer{0%,100%{background-position:0% 0%}50%{background-position:0% 100%}}
@keyframes nc-fx-kingpinGlow{0%,100%{text-shadow:0 0 8px rgba(143,111,224,.7),0 0 18px rgba(143,111,224,.5),0 0 32px rgba(143,111,224,.35)}50%{text-shadow:0 0 14px rgba(164,136,232,.95),0 0 32px rgba(143,111,224,.75),0 0 58px rgba(143,111,224,.5)}}
@media (prefers-reduced-motion: reduce){.nc-fx-kingpin,.nc-fx-kingpin::before{animation:none}}


/* ---------- Own-profile hero: name-style switcher ---------- */
.nc-style-menu{position:relative;display:inline-block;vertical-align:middle}
#ncStyleBtn{font-size:10px;padding:3px 9px 3px 8px;clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs));filter:none;gap:4px}
#ncStyleBtn:hover{transform:none;filter:none}
.nc-style-dropdown{min-width:230px;max-height:340px;overflow-y:auto;right:0;left:auto}
.nc-style-dropdown form{margin:0}
.nc-style-empty{padding:8px 10px 2px;font-size:12px;color:var(--text-faint)}
.nc-style-dropdown>a{display:block;padding:2px 10px 8px;font-size:12.5px;color:var(--accent)}
.nc-style-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 10px;font-size:13px;color:var(--text-dim);cursor:pointer;font-family:var(--font)}
.nc-style-opt:hover{background:var(--surface-2);color:var(--text)}
.nc-style-opt.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}


/* ── Client update bar (DLL Update Log, published from the panel) ── */
#announce-dll{margin-bottom:16px}
/* Match the manual announcement exactly: hide the theme header and render the
   label inside the inbox, so the label and the content share one left edge.
   With the .hd visible the two used different paddings and did not line up. */
#announce-dll .hd{display:none}
#announce-dll .inbox{padding:16px 18px}
#announce-dll .inbox::before{content:"Client update";display:block;font-family:var(--font-display);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.nc-dll-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.nc-dll-ver{font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:16px;font-weight:700;color:var(--text)}
.nc-dll-date{font-size:12px;color:var(--text-faint)}
.nc-dll-link{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accent)}
.nc-dll-note{font-size:13px;color:var(--text-dim);margin-bottom:9px}
.nc-dll-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.nc-dll-list li{font-size:13.5px;color:var(--text-dim);line-height:1.5;display:flex;gap:8px;align-items:baseline}
.nc-dll-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
            padding:1px 6px;border-radius:3px;background:var(--surface-2);color:var(--text-faint)}
.nc-dll-added{color:#4bd583;background:rgba(75,213,131,.12)}
.nc-dll-changed{color:#3b82f6;background:rgba(59,130,246,.12)}
.nc-dll-improved{color:#a855f7;background:rgba(168,85,247,.12)}
.nc-dll-fixed{color:#f2b23f;background:rgba(242,178,63,.12)}
.nc-dll-more{display:inline-block;margin-top:9px;font-size:12.5px;color:var(--text-faint)}
.nc-dll-more:hover{color:var(--accent)}
@media (max-width:560px){
  .nc-dll-link{margin-left:0;width:100%}
  .nc-dll-list li{flex-direction:column;gap:2px}
}

/* ── Name styles, wave 2 ──────────────────────────────────────────────────
   Same conventions as the originals: !important on font/colour, gradient text
   via background-clip, nc-nf-shift for the animated tiers. Restraint is the
   point in the lower tiers -- the spend goes on legibility, not effects.     */

/* Common — clean, no colour tricks */
.nc-fx-nf_c9{font-family:var(--mono,ui-monospace,Consolas,monospace)!important;font-weight:400!important;color:#a1a1aa!important;letter-spacing:.16em}
.nc-fx-nf_c10{font-family:var(--font)!important;font-weight:200!important;color:#d4d4d8!important;letter-spacing:.2em;text-transform:uppercase}
.nc-fx-nf_c11{font-family:Georgia,serif!important;font-style:italic!important;font-weight:400!important;color:#a8a29e!important}
.nc-fx-nf_c12{font-family:var(--font-display)!important;font-weight:800!important;color:#8b8b94!important;letter-spacing:-.02em}

/* Uncommon — one flat colour from the site palette */
.nc-fx-nf_u9{font-family:var(--font-display)!important;font-weight:700!important;color:#fbbf24!important}
.nc-fx-nf_u10{font-family:var(--font-display)!important;font-weight:600!important;color:#5eead4!important;letter-spacing:.03em}
.nc-fx-nf_u11{font-family:Georgia,serif!important;font-weight:600!important;color:#fda4af!important}
.nc-fx-nf_u12{font-family:var(--font)!important;font-weight:800!important;color:#94a3b8!important;letter-spacing:.08em;text-transform:uppercase}

/* Rare — restrained two-stop gradients */
.nc-fx-nf_r9{font-family:var(--font-display)!important;font-weight:700!important;background:linear-gradient(180deg,#fdba74 0%,#9a3412 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r10{font-family:var(--font-display)!important;font-weight:700!important;background:linear-gradient(180deg,#e0f2fe 0%,#0369a1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r11{font-family:var(--font-display)!important;font-weight:700!important;background:linear-gradient(180deg,#d9f99d 0%,#3f6212 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nc-fx-nf_r12{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:700!important;letter-spacing:.05em;background:linear-gradient(180deg,#f1f5f9 0%,#475569 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}

/* Epic — gradient plus a restrained glow or edge */
.nc-fx-nf_e9{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:900!important;letter-spacing:.05em;background:linear-gradient(90deg,#f5d0fe,#c026d3,#7e22ce);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;filter:drop-shadow(0 0 6px rgba(192,38,211,.45))}
.nc-fx-nf_e10{font-family:var(--font-display)!important;font-weight:900!important;background:linear-gradient(90deg,#fed7aa,#f97316,#b91c1c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;filter:drop-shadow(0 0 6px rgba(249,115,22,.45))}
.nc-fx-nf_e11{font-family:var(--font-display)!important;font-weight:800!important;letter-spacing:.04em;background:linear-gradient(90deg,#ffffff,#a5f3fc,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;filter:drop-shadow(0 0 6px rgba(34,211,238,.4))}
.nc-fx-nf_e12{font-family:'Cinzel',var(--font-display),serif!important;font-weight:900!important;letter-spacing:.1em;background:linear-gradient(180deg,#fde68a 0%,#a16207 60%,#3f3f46 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}

/* Mythic — animated gradients, motion measured in seconds */
.nc-fx-nf_m9{font-family:var(--font-display)!important;font-weight:800!important;background:linear-gradient(90deg,#a7f3d0,#22d3ee,#a78bfa,#22d3ee,#a7f3d0);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 5s linear infinite}
.nc-fx-nf_m10{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:900!important;letter-spacing:.08em;background:linear-gradient(90deg,#f8fafc,#94a3b8,#334155,#94a3b8,#f8fafc);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 5s linear infinite}
.nc-fx-nf_m11{font-family:var(--font-display)!important;font-weight:900!important;background:linear-gradient(90deg,#fecaca,#dc2626,#7f1d1d,#dc2626,#fecaca);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 6s linear infinite}

/* Legendary — the showpieces. Two only. */
.nc-fx-nf_l1{font-family:'Cinzel',var(--font-display),serif!important;font-weight:900!important;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(90deg,#3f3f46,#fde68a,#fffbeb,#fde68a,#3f3f46);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 7s linear infinite,nc-nf-eclipse 4s ease-in-out infinite}
.nc-fx-nf_l2{font-family:'Orbitron',var(--font-display),sans-serif!important;font-weight:900!important;letter-spacing:.1em;background:linear-gradient(90deg,#f472b6,#c084fc,#60a5fa,#34d399,#facc15,#f472b6);background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:nc-nf-shift 8s linear infinite,nc-nf-royale 5s ease-in-out infinite}

@keyframes nc-nf-eclipse{0%,100%{filter:drop-shadow(0 0 4px rgba(253,230,138,.35))}50%{filter:drop-shadow(0 0 14px rgba(253,230,138,.7))}}
@keyframes nc-nf-royale{0%,100%{filter:drop-shadow(0 0 5px rgba(192,132,252,.4))}50%{filter:drop-shadow(0 0 16px rgba(96,165,250,.65))}}

@media (prefers-reduced-motion:reduce){
  .nc-fx-nf_m9,.nc-fx-nf_m10,.nc-fx-nf_m11,.nc-fx-nf_l1,.nc-fx-nf_l2{animation:none!important}
}

/* Legendary tier heading in the store */
.nc-rarity-legendary .nc-rarity-title{color:#ffcf4d}

/* ---------- Discord move notice ----------
   Sits above everything on every page. Uses Discord's own blurple rather than
   the site accent so it reads as "this is about Discord" at a glance, and keeps
   the cut-corner geometry the rest of the site uses. */
.nc-dmove{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:13px 16px;
	background:linear-gradient(90deg,rgba(88,101,242,.18),rgba(88,101,242,.06));
	border:1px solid rgba(88,101,242,.45);
	clip-path:polygon(var(--cut-md) 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%,0 var(--cut-md))}
.nc-dmove-ico{flex:none;width:30px;height:30px;display:grid;place-items:center;color:#8b95f7}
.nc-dmove-ico svg{width:24px;height:24px}
.nc-dmove-txt{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.55;color:var(--text-dim)}
.nc-dmove-txt b{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.02em;
	color:var(--text);margin-bottom:2px}
.nc-dmove-cta{flex:none;font-family:var(--font-display);font-size:11px;letter-spacing:.03em;
	text-transform:uppercase;text-decoration:none;background:#5865f2;color:#fff;padding:10px 16px;
	clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
	transition:filter .12s ease}
.nc-dmove-cta:hover{filter:brightness(1.15)}
.nc-dmove-x{flex:none;background:none;border:none;color:var(--text-faint);font-size:20px;
	line-height:1;cursor:pointer;padding:0 2px}
.nc-dmove-x:hover{color:var(--text)}
@media (max-width:640px){
	.nc-dmove{flex-wrap:wrap}
	.nc-dmove-txt{flex:1 1 100%;order:3}
	.nc-dmove-cta{order:4;width:100%;text-align:center}
}

/* ---------- avatar: the card on the profile ----------
   Replaces a bare "Upload avatar" text link that sat in a paragraph of prose and
   read as body copy. Shows what you have now, says what the rules are, and gives
   the action an actual button. */
.nc-avcard{display:flex;align-items:center;gap:16px;padding:15px 16px;
	background:var(--surface-2);border:1px solid var(--line);
	clip-path:polygon(var(--cut-md) 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%,0 var(--cut-md))}
.nc-avcard-pic{flex:none;width:72px;height:72px;display:grid;place-items:center}
/* the avatar markup already carries .nc-avatar and its cut-corner clip-path, so
   this only needs to size it -- no second shape fighting the first */
.nc-avcard-pic .nc-avatar,.nc-avcard-pic .nc-avatar-fallback{width:72px;height:72px}
.nc-avcard-pic img{width:72px;height:72px;object-fit:cover;display:block}
.nc-avcard-none{display:grid;place-items:center;width:72px;height:72px;background:var(--bg);
	border:1px solid var(--line);clip-path:polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%)}
.nc-avcard-none{color:var(--text-faint)}
.nc-avcard-none svg{width:32px;height:32px;display:block}
.nc-avcard-body{min-width:0;flex:1 1 auto}
.nc-avcard-t{font-family:var(--font-display);font-size:13px;letter-spacing:.02em;color:var(--text);margin-bottom:4px}
.nc-avcard-s{font-size:12px;color:var(--text-faint);line-height:1.55;margin-bottom:11px}
.nc-avcard-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nc-avcard-go{font-size:11px !important;padding:10px 16px !important;text-decoration:none}
.nc-avcard-del{font-size:11.5px;color:var(--text-faint);text-decoration:underline}
.nc-avcard-del:hover{color:var(--danger)}
@media (max-width:560px){
	.nc-avcard{flex-direction:column;align-items:flex-start;text-align:left}
}

/* ---------- avatar: the crop step ----------
   The server only ever scaled whatever it was handed, so a non-square picture
   came out squashed and there was no way to say which part mattered. The frame
   below is the crop: whatever sits inside it is exactly what gets saved. */
.nc-av-back{display:none}
.nc-av-live .nc-av-back{display:block}

/* `hidden` loses to any author display rule, and both of these set one, so the
   picker stayed on screen behind the editor and the editor showed before a file
   had even been chosen. Restore what `hidden` is supposed to mean. */
.nc-av-ui[hidden],.nc-av-pick[hidden],.nc-av-edit[hidden]{display:none}

.nc-av-pick{display:flex;flex-direction:column;align-items:center;gap:7px;padding:34px 20px;cursor:pointer;
	border:2px dashed var(--line);background:var(--surface-2);color:var(--text-dim);text-align:center;
	transition:border-color .14s ease,background .14s ease}
.nc-av-pick:hover,.nc-av-pick.over{border-color:var(--accent);background:var(--accent-soft)}
.nc-av-pick-ico{color:var(--accent-2)}
.nc-av-pick-ico svg{width:30px;height:30px;display:block}
.nc-av-pick-t{font-family:var(--font-display);font-size:13px;letter-spacing:.02em;color:var(--text)}
.nc-av-pick-s{font-size:11.5px;color:var(--text-faint)}

.nc-av-edit{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.nc-av-stage{position:relative;flex:none;width:320px;height:320px;background:var(--bg);
	border:1px solid var(--line);overflow:hidden}
.nc-av-stage canvas{display:block;cursor:grab;touch-action:none}
.nc-av-stage canvas:active{cursor:grabbing}
/* The whole square is what gets saved, so nothing here is dimmed -- an earlier
   version dimmed outside a circle, which implied a circular crop that never
   happens. A thin inner edge marks the frame; the live preview beside it shows
   the shape the avatar is actually displayed in. */
.nc-av-mask{position:absolute;inset:0;pointer-events:none;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

.nc-av-side{flex:1 1 250px;min-width:230px}
.nc-av-hint{font-size:12px;color:var(--text-faint);line-height:1.55;margin-bottom:14px}
.nc-av-zoom{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.nc-av-zoom span{font-family:var(--font-display);font-size:10px;letter-spacing:.08em;
	text-transform:uppercase;color:var(--text-faint)}
.nc-av-zoom input{flex:1;accent-color:var(--accent)}
.nc-av-prevrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;
	padding-top:14px;border-top:1px solid var(--line)}
.nc-av-prevbox{flex:none;width:64px;height:64px;background:var(--bg)}
.nc-av-prevbox canvas{width:64px;height:64px;display:block;border:1px solid var(--line);
	clip-path:polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%)}
.nc-av-prevtxt{font-size:11.5px;color:var(--text-faint);line-height:1.5}
.nc-av-acts{display:flex;gap:9px;flex-wrap:wrap}
.nc-av-save{font-size:12px !important;padding:12px 20px !important}
.nc-av-alt{font-size:12px !important;padding:12px 16px !important;
	background:var(--surface-2) !important;color:var(--text-dim) !important;border:1px solid var(--line) !important}
.nc-av-err{margin-top:11px;font-size:12.5px;color:var(--danger);min-height:16px}
@media (max-width:700px){
	.nc-av-stage{width:100%;max-width:320px;height:auto;aspect-ratio:1/1}
	.nc-av-stage canvas{width:100% !important;height:auto !important}
}

/* ============================================================ player profile */
/* Renamed from nc-hero: loader_download.php defines its own .nc-hero, and
   ".pun .nc-hero" here outranked it and broke that page's header. */
/* Uses the existing tokens and the same hard-edged clip-path language as the
   rest of the theme -- no border-radius anywhere, chamfers cut in pixels. */

.pun .nc-phero{position:relative;overflow:hidden;padding:0;min-height:250px;display:flex;align-items:flex-start}

/* Placeholder artwork, drawn entirely in CSS. To use a real image later, set
   background-image here -- the scrim below already guarantees text contrast, so
   nothing else has to change. */
.nc-phero-art{position:absolute;inset:0;background:
	radial-gradient(1100px 380px at 78% -8%, rgba(143,111,224,.34), transparent 62%),
	radial-gradient(620px 300px at 12% 108%, rgba(90,63,184,.30), transparent 68%),
	repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 92px),
	repeating-linear-gradient(-115deg, rgba(143,111,224,.05) 0 1px, transparent 1px 140px),
	linear-gradient(180deg,#191423 0%,#120f18 58%,#0c0a11 100%);
	background-size:cover;background-position:center}
/* The mark, sunk into the artwork rather than sitting on it. */
.nc-phero-glyph{position:absolute;right:3.5%;top:47%;transform:translateY(-50%);
	font-family:var(--font-display);font-size:290px;line-height:.8;color:rgba(255,255,255,.028);
	letter-spacing:-.04em;pointer-events:none;user-select:none}
.nc-phero-scrim{position:absolute;inset:0;background:
	linear-gradient(90deg, rgba(10,10,14,.94) 0%, rgba(10,10,14,.80) 44%, rgba(10,10,14,.30) 100%),
	linear-gradient(0deg, rgba(10,10,14,.92) 0%, transparent 60%)}

.nc-phero-body{position:relative;z-index:1;display:flex;align-items:flex-start;gap:24px;
	width:100%;padding:26px 26px 24px}
.nc-phero-av{position:relative;flex:none;line-height:0}
.pun .nc-phero-av .nc-avatar,.pun .nc-phero-av .nc-avatar-fallback{width:158px;height:158px;font-size:62px;
	border:2px solid var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.85), 0 0 26px rgba(143,111,224,.42)}
.pun .nc-phero-av .nc-status-dot{right:6px;bottom:6px;width:18px;height:18px;border:3px solid #0d0b12}

.nc-phero-id{flex:1 1 auto;min-width:0}
.nc-phero-name{font-family:var(--font-display);font-size:34px;line-height:1.1;letter-spacing:.01em;
	word-break:break-word;margin-bottom:9px}
.nc-phero-name .nc-uid-tag{font-size:14px;margin-left:8px}
.nc-phero-name .nc-uid-badge{width:26px;height:26px;vertical-align:-5px;margin-right:7px}
.nc-phero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.nc-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:10.5px;font-weight:700;
	letter-spacing:.09em;text-transform:uppercase;font-family:var(--font-display);
	background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-2);
	clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm))}
.nc-tag-on{color:var(--online);border-color:rgba(74,222,128,.34);background:var(--online-soft)}
.nc-tag-off{color:var(--text-faint)}
.nc-tag .nc-dot{width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.nc-phero-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--text-dim);margin-bottom:14px}
.nc-phero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:9px}

.nc-phero-side{flex:none;width:190px;text-align:right;padding-top:6px}
.nc-phero-side-k{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
	color:var(--text-faint);font-family:var(--font-display)}
.nc-phero-side-v{font-family:var(--font-display);font-size:19px;color:var(--text);margin-top:3px}
.nc-phero-side-rule{height:1px;background:var(--line);margin:13px 0}
.nc-phero-side-v2{font-family:var(--font-display);font-size:30px;color:var(--accent-2);line-height:1}

/* ---------------------------------------------------------------- stat bar */
.pun .nc-statbar{display:flex;padding:0}
.nc-stat{flex:1 1 0;padding:18px 12px;text-align:center;border-left:1px solid var(--line);min-width:0}
.nc-stat:first-child{border-left:0}
.nc-stat-l{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
	color:var(--text-faint);font-family:var(--font-display);margin-bottom:7px}
.nc-stat-v{font-family:var(--font-display);font-size:29px;line-height:1;color:var(--text);
	font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ performance panels */
.nc-perf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
	flex-wrap:wrap;margin-bottom:16px}
/* The range filter lives in the panel heading, right aligned, so it reads as a
   control on the section rather than as content crowding the panel's edge. */
.pun .block>h2.nc-h2-flex{display:flex;align-items:center;justify-content:space-between;
	gap:12px 30px;flex-wrap:wrap;padding:9px 16px}
/* The heading must not be crowded by the first tab -- with five tabs the row
   fills the bar and they end up touching without this. */
.nc-h2-flex>span:first-child{padding-right:6px}
.nc-h2-flex>span:first-child{flex:1 1 auto}
.pun .nc-h2-flex .nc-range{display:inline-flex;gap:8px;font-weight:400}
.pun .nc-h2-flex .nc-range-o{padding:5px 11px;font-size:10px}
/* .box itself is transparent and unpadded -- the classic markup got its inset
   from .inform inside it. These panels put content straight into the box, so
   they need their own. */
.pun .box.nc-sec{padding:16px 18px}
/* About: label/value rows in the same language as the performance panels,
   replacing the old framed fieldsets. float:none undoes FluxBB's classic
   floated dt/dd layout. */
.pun .nc-about{padding:16px 18px}
.pun .nc-about dl.nc-dl{margin:0;display:grid;grid-template-columns:172px minmax(0,1fr)}
.pun .nc-about dl.nc-dl dt,.pun .nc-about dl.nc-dl dd{float:none;width:auto;
	border-bottom:1px dashed rgba(47,42,55,.6);margin:0}
.pun .nc-about dl.nc-dl dt{font-family:var(--font-display);font-size:10.5px;font-weight:700;
	letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);
	padding:12px 16px 12px 0}
.pun .nc-about dl.nc-dl dd{padding:12px 0;color:var(--text-2);font-size:14px;
	min-width:0;overflow-wrap:anywhere}
.pun .nc-about dl.nc-dl dt:nth-last-of-type(1),
.pun .nc-about dl.nc-dl dd:nth-last-of-type(1){border-bottom:0}
.pun .nc-about .postsignature{margin:0;padding:0;border:0;color:var(--text-2)}
@media (max-width:640px){
	.pun .nc-about dl.nc-dl{grid-template-columns:1fr}
	.pun .nc-about dl.nc-dl dt{padding:12px 0 2px;border-bottom:0}
	.pun .nc-about dl.nc-dl dd{padding:0 0 12px}
}
.pun .box.nc-sec .nc-empty{padding:2px 0 4px}
/* When the filter wraps under the title on a narrow screen it must not sit
   flush against the heading text above it. */
.pun .block>h2.nc-h2-flex{row-gap:10px}
.nc-range{display:flex;flex-wrap:wrap;gap:6px}
.pun .nc-range-o{display:inline-block;padding:6px 12px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;font-family:var(--font-display);color:var(--text-dim);
	background:var(--surface-2);border:1px solid var(--line);text-decoration:none;
	clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm))}
.pun .nc-range-o:hover{color:var(--text);border-color:var(--accent)}
.pun .nc-range-o.is-on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.nc-badges-count{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;
	text-transform:uppercase;color:var(--text-dim)}

.nc-perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nc-perf{background:var(--surface-2);border:1px solid var(--line);padding:16px 18px;
	clip-path:polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)))}
.nc-perf-t{font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:var(--accent-2);padding-bottom:11px;margin-bottom:5px;
	border-bottom:1px solid var(--line)}
.nc-perf-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;
	border-bottom:1px dashed rgba(47,42,55,.6)}
.nc-perf-r:last-child{border-bottom:0}
.nc-perf-r span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.nc-perf-r b{font-family:var(--font-display);font-size:16px;color:var(--text);
	font-variant-numeric:tabular-nums}

/* Scoped to this page's own containers: loader_download.php has its own
   .nc-empty, and an unscoped rule here leaks padding onto it. */
.nc-sec .nc-empty,.nc-about .nc-empty{color:var(--text-dim);font-size:13px;padding:14px 0;margin:0}
.nc-sec .nc-note{color:var(--text-faint);font-size:11.5px;margin:14px 0 0;padding-top:12px;
	border-top:1px solid var(--line)}

/* -------------------------------------------------------------- trend line */
.nc-trend{margin-top:18px;background:var(--surface-2);border:1px solid var(--line);padding:14px 16px 8px;
	clip-path:polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)))}
.nc-trend-t{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--text-dim);margin-bottom:8px}
.nc-trend-t span{color:var(--text-faint);letter-spacing:.04em;margin-left:8px}
.nc-spark{display:block;width:100%;height:90px}
.nc-spark-line{fill:none;stroke:var(--accent-2);stroke-width:2;vector-effect:non-scaling-stroke;
	stroke-linejoin:round;stroke-linecap:round}
.nc-spark-fill{fill:rgba(143,111,224,.13);stroke:none}

/* ----------------------------------------------------------------- badges */
.nc-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px}
.nc-bdg{text-align:center;padding:14px 8px 11px;background:var(--surface-2);border:1px solid var(--line);
	clip-path:polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)))}
.nc-bdg-i{height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.nc-bdg-i img{max-width:48px;max-height:48px}
.nc-bdg-n{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	font-family:var(--font-display);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Locked reads as absent, not as a second style of present. */
.nc-bdg.is-locked{opacity:.32;filter:grayscale(1)}
.nc-bdg.is-locked .nc-bdg-n{color:var(--text-faint)}

/* --------------------------------------------------------------- activity */
.nc-acts{display:flex;flex-direction:column}
.nc-act{display:flex;gap:16px;padding:10px 0;border-bottom:1px dashed rgba(47,42,55,.6)}
.nc-act:last-child{border-bottom:0}
.nc-act-d{flex:none;width:96px;font-family:var(--mono);font-size:11px;color:var(--text-faint);
	font-variant-numeric:tabular-nums}
.nc-act-t{font-size:13px;color:var(--text-2)}

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
	.nc-perf-grid{grid-template-columns:1fr}
	.nc-phero-side{display:none}
	.nc-statbar{flex-wrap:wrap}
	.nc-stat{flex:1 1 33%;border-top:1px solid var(--line)}
	.nc-stat:nth-child(-n+3){border-top:0}
	.nc-stat:nth-child(4){border-left:0}
}
@media (max-width:640px){
	.pun .nc-phero{min-height:0}
	.nc-phero-body{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 16px 18px}
	.pun .nc-phero-av .nc-avatar,.pun .nc-phero-av .nc-avatar-fallback{width:104px;height:104px;font-size:42px}
	.nc-phero-name{font-size:25px}
	.nc-phero-glyph{font-size:180px;opacity:.6}
	.nc-stat{flex:1 1 50%}
	.nc-stat:nth-child(-n+3){border-top:1px solid var(--line)}
	.nc-stat:nth-child(-n+2){border-top:0}
	.nc-stat:nth-child(odd){border-left:0}
	.nc-act-d{width:74px}
}

/* ---- profile banners ---- */
/* Wearing a banner replaces the generated placeholder art. The scrim over it is
   unchanged, so text contrast holds on any image. */
.nc-phero-art.has-art{background-size:cover;background-position:center}
.nc-bnr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.nc-bnr-card{background:var(--surface-2);border:1px solid var(--line);overflow:hidden;
	clip-path:polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)))}
.nc-bnr-img{line-height:0;background:var(--ink)}
.nc-bnr-img img{width:100%;height:104px;object-fit:cover;display:block}
.nc-bnr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px}
.nc-bnr-name{font-family:var(--font-display);font-size:12.5px;letter-spacing:.05em;
	text-transform:uppercase;color:var(--text)}
.nc-soon{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.11em;
	text-transform:uppercase;color:var(--gold);background:var(--gold-soft);
	border:1px solid rgba(255,207,77,.34);padding:4px 9px;
	clip-path:polygon(var(--cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--cut-sm));white-space:nowrap}
/* Not for sale yet, so the artwork is shown a touch quieter than a live item. */
.nc-bnr-card.is-soon .nc-bnr-img img{opacity:.82}

/* ============================================================ modern pass
   Everything below targets FluxBB's own stock classes, so one rule improves
   every page that uses that pattern -- forms, topic lists, link strips and the
   board footer are shared by dozens of pages. No markup or PHP is touched. */

/* ---- forms ---------------------------------------------------------------
   FluxBB floats its fields with .conl; the theme cancelled that float and set
   each label to a full-width column, so every form became a tall single-file
   stack -- the most dated thing on the site. A grid puts fields back side by
   side and keeps them responsive. */
.pun .infldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:16px 20px;align-items:start}
.pun .infldset label{margin-bottom:0}
.pun .infldset label.conl{float:none;display:flex}
/* Anything that needs the full width says so, rather than being squeezed into
   a column: help text, editors, and any field holding a textarea. */
.pun .infldset>p,.pun .infldset>.checklist,.pun .infldset>.rbox,
.pun .infldset label:has(textarea),.pun .infldset label.longinput,
.pun .infldset>div{grid-column:1/-1}
.pun .infldset>p{color:var(--text-dim);font-size:12.5px;margin:2px 0 0;
	padding-top:12px;border-top:1px solid var(--line)}
/* A label reads as a field name, not body copy. */
.pun .infldset label>span:first-child,.pun .infldset label{font-size:13px}
.pun .infldset input[type="text"],.pun .infldset input[type="password"],
.pun .infldset input[type="email"],.pun .infldset input[type="number"],
.pun .infldset select{width:100%;max-width:none}
/* Checkboxes and radios belong on one line with their text. */
.pun .infldset label:has(>input[type="checkbox"]),
.pun .infldset label:has(>input[type="radio"]){flex-direction:row;align-items:center;gap:9px}

/* ---- the read / unread marker -------------------------------------------
   Was a 7px grey square, identical whether or not there was anything new.
   Now unread is the accent and carries a glow; read is a quiet outline. */
.pun .icon,.pun .icon-new{width:9px;height:9px;border-radius:0;
	background:transparent;border:2px solid var(--line);
	transform:rotate(45deg);margin:0 12px;transition:all .15s ease}
.pun .icon-new{background:var(--accent);border-color:var(--accent);
	box-shadow:0 0 10px rgba(143,111,224,.55)}
.pun .icon.inone{opacity:.35}
.pun tr:hover .icon{border-color:var(--text-faint)}

/* ---- topic / forum rows --------------------------------------------------
   More hierarchy: the title leads, the metadata recedes, the row responds. */
.pun .tclcon h3{font-size:15px;font-weight:600;letter-spacing:.005em}
.pun .tclcon h3 a:hover{color:var(--accent-2)}
.pun td.tcl{padding-top:13px;padding-bottom:13px}
.pun .tclcon>span,.pun .byuser{color:var(--text-faint);font-size:12px}
.pun tbody tr{transition:background .12s ease}
.pun tbody tr:hover{background:var(--surface-2)}
/* Counts read as data, not prose. */
.pun td.tc2,.pun td.tc3{font-variant-numeric:tabular-nums;color:var(--text-dim)}

/* ---- breadcrumb + pager strips ------------------------------------------
   .linkst/.linksb hold the breadcrumb, pager and actions. They were bare text
   floating between panels; this makes them read as a toolbar. */
.pun .linkst,.pun .linksb{display:flex;align-items:center;justify-content:space-between;
	gap:14px;flex-wrap:wrap;padding:0 2px}
.pun .linksb{opacity:.85;font-size:12.5px}
.pun .linkst .pagelink,.pun .linksb .pagelink,
.pun .linkst .postlink,.pun .linksb .postlink{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* A bare "Mark this forum as read" link becomes a quiet control. */
.pun .linksb a,.pun .linkst a.subscribelink{color:var(--text-dim)}
.pun .linksb a:hover,.pun .linkst a.subscribelink:hover{color:var(--accent-2)}

/* ---- board footer --------------------------------------------------------
   The member roll is 90+ comma-separated names; left alone it is a wall of
   text. Capped with a fade so it stops dominating the page, and it opens on
   hover for anyone who actually wants to read it. */
#brdstats dl.conl dd,#brdstats dl.conr dd{line-height:2}
#brdstats .inbox>dl:last-of-type dd{max-height:5.6em;overflow:hidden;position:relative;
	transition:max-height .3s ease}
#brdstats .inbox>dl:last-of-type:hover dd{max-height:40em}
#brdstats .inbox>dl:last-of-type dd::after{content:"";position:absolute;left:0;right:0;bottom:0;
	height:2.2em;background:linear-gradient(180deg,transparent,var(--surface));
	pointer-events:none;transition:opacity .3s ease}
#brdstats .inbox>dl:last-of-type:hover dd::after{opacity:0}

/* ---- pagination ----------------------------------------------------------
   Numbers become real targets rather than inline links. */
.pun .pagelink a,.pun .pagelink strong,.pun .pagelink em{display:inline-flex;
	align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;
	font-family:var(--mono);font-size:12px;font-style:normal;
	background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);
	clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.pun .pagelink a:hover{color:var(--text);border-color:var(--accent)}
.pun .pagelink strong,.pun .pagelink em{background:var(--accent);color:var(--bg);
	border-color:var(--accent);font-weight:700}

/* ---- moderator strip -----------------------------------------------------
   Admin-only furniture should not compete with the content above it. */
.pun .modmenu{opacity:.7;transition:opacity .15s ease}
.pun .modmenu:hover{opacity:1}

/* ---- focus ---------------------------------------------------------------
   The theme had no visible focus state; keyboard users were flying blind. */
.pun a:focus-visible,.pun button:focus-visible,.pun input:focus-visible,
.pun select:focus-visible,.pun textarea:focus-visible{outline:2px solid var(--accent-2);
	outline-offset:2px}

@media (max-width:640px){
	.pun .infldset{grid-template-columns:1fr;gap:14px}
	.pun .linkst,.pun .linksb{gap:10px}
}

/* ---- topic view ----------------------------------------------------------
   The author sidebar was 150px, so "Registered: 22-08-2026" wrapped mid-date,
   and because the two columns are a grid the sidebar's height set the height of
   the whole post -- a one-word reply rendered 380px tall. Wider column, quieter
   metadata, tighter rhythm. */
.pun .postbody{grid-template-columns:196px 1fr}
.pun .postleft{padding:18px 14px}
.pun .postleft dl{margin:0}
.pun .postleft dd{margin:0}
.pun .postavatar{margin-bottom:12px}
.pun .postleft dt{font-size:14px;line-height:1.3}
.pun .usertitle{margin:6px 0 12px}
/* Registered / Posts / IP are reference detail, not headline information. */
.pun .postleft dd{font-size:11.5px;color:var(--text-faint);line-height:1.9;
	font-variant-numeric:tabular-nums}
.pun .postleft dd.postavatar,.pun .postleft dd.usertitle{font-size:inherit}
/* Contact links read as controls rather than loose text. */
.pun .postleft .postcontacts{margin-top:12px;padding-top:10px;
	border-top:1px solid var(--line);display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pun .postleft .postcontacts a{font-size:11px;color:var(--text-dim);
	padding:3px 9px;background:var(--surface-2);border:1px solid var(--line);
	clip-path:polygon(var(--cut-xs) 0,100% 0,100% 100%,0 100%,0 var(--cut-xs))}
.pun .postleft .postcontacts a:hover{color:var(--text);border-color:var(--accent)}

/* The body should breathe but not be padded out to match the sidebar. */
.pun .postright{padding:18px 20px}
.pun .postright h3{font-family:var(--font-display);font-size:15px;letter-spacing:.02em;
	margin:0 0 10px;color:var(--text)}
.pun .postmsg{color:var(--text-2)}

/* Post header: date on the left, permalink on the right, both quiet. */
.pun .blockpost>h2{font-size:11.5px;letter-spacing:.06em;color:var(--text-faint)}
.pun .blockpost>h2 span{color:var(--text-dim);font-weight:600}

/* Actions are secondary to the post itself. */
.pun .postfoot{padding:8px 16px}
.pun .postfootright a{font-size:11px}

@media (max-width:760px){
	/* Stack on a phone: a 196px sidebar beside a narrow body is unreadable. */
	.pun .postbody{grid-template-columns:1fr}
	.pun .postleft{border-right:0;border-bottom:1px solid var(--line);
		display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px}
	.pun .postleft dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
	.pun .postavatar{margin:0}
	.pun .postleft dd:not(.postavatar):not(.usertitle){display:none}
	.pun .postleft .postcontacts{border:0;margin:0;padding:0}
}

/* ---- top navigation ------------------------------------------------------
   The rail overflowed its container by just 19px, which was enough to turn the
   whole bar into a horizontal scroller and push PM out of reach. Tightening the
   item padding recovers 48px; the hidden scrollbar is a safety net for narrower
   viewports rather than the fix. */
.navtabs{gap:0;scrollbar-width:none}
.navtabs::-webkit-scrollbar{display:none}
.navtabs .rail-item{padding:9px 9px}

/* ---- store tab rail ------------------------------------------------------
   ".pun button" (0,1,1) outranked ".nc-stab" (0,1,0), so the tabs were painted
   as primary buttons -- purple fill, chamfer and drop shadow. That chamfer was
   clipping the count badge, and it made the rail's own underline read as a
   stray extra line. These restore the text-tab treatment store.php intended. */
.pun .nc-store-tabs .nc-stab{background:none;border:0;clip-path:none;filter:none;
	transform:none;box-shadow:none;padding:0 0 11px;font-size:12px;
	letter-spacing:.08em;color:var(--text-faint)}
.pun .nc-store-tabs .nc-stab:hover{background:none;filter:none;transform:none;
	color:var(--text-dim)}
.pun .nc-store-tabs .nc-stab[aria-selected="true"]{background:none;color:var(--text)}

/* ---- stretched buttons ---------------------------------------------------
   A full-width .nc-btn left its label hard against the chamfered corner, so
   "Convert" looked like it was falling out of the button. */
.pun .nc-btn{justify-content:center}

/* ---- store profile preview -----------------------------------------------
   The equipped rows had no layout of their own, so the badge icon, its name and
   the Unequip button sat on the text baseline at different heights. */
.pp-name{margin-bottom:4px;line-height:1.3}
.pp-badges{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px}
.pp-badges form{display:flex;margin:0}
.pp-badges .nc-uid-badge{width:20px;height:20px;margin:0;flex:none;
	display:inline-flex;align-items:center}
.pp-badges .nc-uid-badge img{width:100%;height:100%;object-fit:contain}
.profile-preview>div{min-width:0}

/* ---- store: owned items --------------------------------------------------
   Owned cards used to render an "Owned" block AND an Equip button, one control
   more than every other card, which is what made them taller. Now it is one
   control: green Equip when owned, "Equipped" when it is being worn. */
.pun .nc-btn.nc-equip,.pun .nc-btn.nc-equip:hover{background:var(--online);
	color:#04140a;border-color:transparent}
.pun .nc-btn.nc-equip:hover{filter:brightness(1.08) drop-shadow(1px 1px 0 #000)}

/* ---- topic / forum row marker -------------------------------------------
   The read-state marker is a block element sitting inside the title cell, so
   it stacked ABOVE the topic title as a floating diamond and pushed the row
   taller. Removed; unread is carried by the title instead, which is where the
   eye already is. */
.pun td.tcl .icon,.pun td.tcl .icon-new{display:none}
.pun tr:has(.icon-new) .tclcon h3 a,
.pun tr:has(.icon-new) .tclcon h3{color:var(--text);font-weight:700}
.pun tr:has(.icon-new) .tclcon h3 a::after{content:"";display:inline-block;
	width:6px;height:6px;margin-left:8px;background:var(--accent);
	transform:rotate(45deg);vertical-align:middle;
	box-shadow:0 0 8px rgba(143,111,224,.6)}
/* Without the marker the title cell no longer needs the indent it left behind. */
.pun td.tcl .tclcon{margin-left:0}

/* ---- store card buttons --------------------------------------------------
   Slightly less heavy than the site's primary button: these repeat dozens of
   times in a grid, so the same weight that suits a lone CTA reads as chunky. */
.pun .nc-rarity-card .nc-btn,
.pun .nc-badge-card .nc-btn,
.pun .nc-kingpin-foot .nc-btn,
.pun .nc-bnr-card .nc-btn{padding:4px 13px;font-size:11px;line-height:1.3}

/* ---- staff-only nav item -------------------------------------------------
   A page that is built but not released yet. Amber rather than a text badge:
   the rail has about 20px of slack and a badge would need twice that. */
.rail-item.rail-staff .rail-label{color:#d9a441}
.rail-item.rail-staff:hover .rail-label{color:#f0d49a}
.rail-item.rail-staff.active .rail-label{color:#f0d49a}
.rail-item.rail-staff::after{content:"";position:absolute;top:4px;right:2px;
	width:5px;height:5px;background:#d9a441;border-radius:50%;opacity:.9}
.rail-item.rail-staff{position:relative}