:root{
  --paper:#EDF0EA; --paper-2:#F7F9F4; --panel:#FFFFFF;
  --ink:#17201B; --muted:#59655E; --faint:#94A099;
  --line:#DCE2D9; --line-2:#CAD2C6;
  --brass:#93701F; --brass-deep:#6F5416; --brass-soft:#F1E9D2;
  --seal:#12857A; --seal-deep:#0C6156; --seal-soft:#E1F0ED;
  --danger:#B5482F;
  --r-common:#6B7772; --r-uncommon:#178A73; --r-rare:#93701F; --r-legendary:#8A6D1F;
  --shadow:0 18px 40px -28px rgba(20,40,32,.5);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(900px 500px at 100% -5%, #E4EEE9 0%, transparent 55%),
    radial-gradient(700px 400px at -5% 105%, #E9EFE5 0%, transparent 50%),
    var(--paper);
  color:var(--ink); font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:inherit}
.mono{font-family:'Space Mono',ui-monospace,monospace}
.wrap{max-width:1080px; margin:0 auto; padding:0 18px 80px}

/* header */
header{position:sticky; top:0; z-index:20; background:rgba(237,240,234,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hbar{max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:16px;
  padding:12px 18px; flex-wrap:wrap}
.mark{font-family:Fraunces; font-weight:600; font-size:24px; letter-spacing:.01em}
.mark .dot{color:var(--brass)}
nav{display:flex; gap:2px; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:3px}
nav button{all:unset; cursor:pointer; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:8px 15px; border-radius:999px}
nav button[aria-current="true"]{background:var(--seal); color:#fff}
nav button:focus-visible{outline:2px solid var(--seal); outline-offset:2px}
.hspacer{flex:1}
.whoami{display:flex; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:11px; color:var(--muted)}
.whoami .av{width:26px; height:26px; border-radius:7px; overflow:hidden; border:1px solid var(--line); background:var(--panel)}
.devbar{display:flex; gap:6px; align-items:center; font-family:'Space Mono',monospace; font-size:10px; color:var(--faint)}
.devbar select{font-family:'Space Mono',monospace; font-size:10px; border:1px solid var(--line); border-radius:6px; padding:3px 6px; background:var(--panel); color:var(--ink)}

.eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); margin:26px 0 14px}

/* buttons */
.btn{all:unset; cursor:pointer; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; padding:12px 20px; border-radius:10px; text-align:center; display:inline-block}
.btn-primary{background:var(--seal); color:#fff; box-shadow:0 10px 22px -12px rgba(18,133,122,.7)}
.btn-primary:hover{background:var(--seal-deep)}
.btn-brass{background:linear-gradient(180deg,var(--brass),var(--brass-deep)); color:#fff}
.btn-ghost{background:var(--panel); border:1px solid var(--line-2); color:var(--muted)}
.btn-ghost:hover{border-color:var(--seal); color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--seal); outline-offset:2px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------------- FLOOR ---------------- */
.event{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:18px}
.event.live{border-color:#bfe0d9}
.live-strip{display:flex; align-items:center; gap:9px; padding:11px 20px; border-bottom:1px solid var(--line);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--seal)}
.pip{width:7px; height:7px; border-radius:50%; background:var(--seal); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,133,122,.5)}70%{box-shadow:0 0 0 8px rgba(18,133,122,0)}100%{box-shadow:0 0 0 0 rgba(18,133,122,0)}}
.event-body{display:grid; grid-template-columns:132px 1fr auto; gap:24px; padding:24px; align-items:center}
.badge-face{aspect-ratio:1; border-radius:14px; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 30% 20%, var(--seal-soft), var(--paper-2));
  display:flex; align-items:center; justify-content:center}
.badge-face .glyph{font-family:Fraunces; font-size:48px; color:var(--brass)}
.badge-meta h2{font-family:Fraunces; font-weight:500; font-size:26px; margin:0 0 5px}
.badge-meta .sub{color:var(--muted); font-size:14px; margin:0 0 16px; max-width:44ch; line-height:1.55}
.stats-row{display:flex; gap:28px; flex-wrap:wrap}
.stat .k{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.stat .v{font-family:'Space Mono',monospace; font-size:16px; margin-top:3px}
.stat .v.warn{color:var(--brass)}
.gauge{height:5px; background:var(--line); border-radius:3px; margin-top:7px; overflow:hidden; width:140px}
.gauge > i{display:block; height:100%; background:linear-gradient(90deg,var(--seal),#3bb0a2); border-radius:3px; transition:width .5s}
.enter-col{display:flex; flex-direction:column; align-items:flex-end; gap:9px}
.enter-note{font-family:'Space Mono',monospace; font-size:10px; color:var(--faint); text-align:right; line-height:1.5}
.sold{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--danger)}

/* ---------------- PROFILE (Steam-esque) ---------------- */
.banner{height:200px; border-radius:16px 16px 0 0; position:relative; overflow:hidden; border:1px solid var(--line); border-bottom:none}
.banner .glow{position:absolute; inset:0; opacity:.9}
.banner .wm{position:absolute; right:-40px; top:-30px; opacity:.14}
.banner .wm svg{width:320px;height:320px}
.id-strip{background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 16px 16px;
  padding:0 24px 20px; display:flex; align-items:flex-end; gap:20px; box-shadow:var(--shadow); position:relative}
.avatar{width:112px; height:112px; border-radius:16px; margin-top:-52px; background:var(--panel);
  border:3px solid var(--panel); box-shadow:0 0 0 1px var(--line), var(--shadow); overflow:hidden; flex-shrink:0}
.avatar svg{width:100%; height:100%}
.id-main{flex:1; padding-bottom:2px; min-width:0}
.id-main .dn{font-family:Fraunces; font-weight:600; font-size:28px; margin:0; line-height:1.1}
.id-main .handle{font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); margin-top:2px}
.id-main .role-chip{display:inline-block; margin-left:8px; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--seal); border:1px solid var(--seal); border-radius:999px; padding:2px 8px; vertical-align:middle}
.id-side{display:flex; align-items:center; gap:12px; padding-bottom:4px}
.level-badge{display:flex; flex-direction:column; align-items:center; gap:2px}
.level-ring{width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--brass) var(--p,40%), var(--line) 0); position:relative}
.level-ring::after{content:''; position:absolute; inset:4px; border-radius:50%; background:var(--panel)}
.level-ring span{position:relative; z-index:1; font-family:'Space Mono',monospace; font-weight:700; font-size:18px}
.level-lbl{font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

.profile-grid{display:grid; grid-template-columns:1fr 300px; gap:20px; margin-top:20px; align-items:start}
.showcase-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:20px; box-shadow:var(--shadow)}
.showcase-box > .head{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line)}
.showcase-box .head .t{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.showcase-box .head .n{font-family:'Space Mono',monospace; font-size:11px; color:var(--faint)}
.showcase-box .body{padding:18px}
.sortbar{display:flex; gap:3px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:3px}
.sortbar button{all:unset; cursor:pointer; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding:5px 10px; border-radius:6px}
.sortbar button[aria-current="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.06)}

.cert-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.cert-grid.feat{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.cert{background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:14px; position:relative; text-align:center}
.cert .seal-wrap{display:flex; justify-content:center; margin-bottom:8px}
.cert svg{width:92px; height:92px}
.cert .name{font-family:Fraunces; font-weight:500; font-size:15px; margin:0 0 8px}
.cert .row{display:flex; justify-content:space-between; align-items:center; font-family:'Space Mono',monospace; font-size:10px}
.cert .serial{color:var(--brass)}
.tier-tag{font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid currentColor}
.cert .pin{position:absolute; top:8px; right:8px; font-size:11px; cursor:pointer; opacity:.5}
.cert .pin.on{opacity:1; color:var(--brass)}
.cert.legendary{box-shadow:0 0 0 1px rgba(138,109,31,.35), 0 0 30px -16px var(--r-legendary)}

.side-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:var(--shadow)}
.side-card h3{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.statline{display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px dashed var(--line)}
.statline:last-child{border-bottom:none}
.statline .l{font-size:13px; color:var(--muted)}
.statline .v{font-family:'Space Mono',monospace; font-size:14px}
.statline .v.big{font-size:16px; color:var(--seal)}
.bio{font-size:14px; line-height:1.6; color:var(--ink)}
.facts{font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); line-height:1.9}

.empty{border:1px dashed var(--line-2); border-radius:12px; padding:34px; text-align:center; color:var(--muted); font-size:14px}

/* edit modal + accent swatches */
.field{margin-bottom:14px}
.field label{display:block; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.field input,.field textarea,.field select{width:100%; border:1px solid var(--line-2); border-radius:9px; padding:10px 12px;
  font-family:Inter,sans-serif; font-size:14px; background:var(--paper-2); color:var(--ink)}
.field textarea{resize:vertical; min-height:70px}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.swatch{width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent}
.swatch[aria-current="true"]{border-color:var(--ink)}

/* ---------------- PUBLISHER ---------------- */
.pub-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow)}
.card h2{font-family:Fraunces; font-weight:500; font-size:20px; margin:0 0 4px}
.card .hint{font-size:13px; color:var(--muted); margin:0 0 18px; line-height:1.5}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.weights{display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; font-family:'Space Mono',monospace; font-size:12px}
.weights input{width:70px; text-align:right}
.errs{background:#fbeae6; border:1px solid #f0c4b8; color:var(--danger); border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:14px; line-height:1.6}
.set-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-row .g{width:42px; height:42px; border-radius:10px; background:var(--seal-soft); display:grid; place-items:center; font-family:Fraunces; color:var(--brass); font-size:22px}
.set-row .info{flex:1; min-width:0}
.set-row .info .nm{font-family:Fraunces; font-size:16px}
.set-row .info .mt{font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); margin-top:2px}
.status-tag{font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.status-live{background:var(--seal-soft); color:var(--seal-deep)}
.status-scheduled{background:var(--brass-soft); color:var(--brass-deep)}
.status-closed{background:var(--line); color:var(--muted)}

/* ---------------- OVERLAY / RUN ---------------- */
.scrim{position:fixed; inset:0; background:rgba(22,32,27,.5); backdrop-filter:blur(5px); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:18px}
.modal{width:min(560px,100%); background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(20,40,32,.6); max-height:92vh; overflow-y:auto}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:15px 22px; border-bottom:1px solid var(--line)}
.modal-head .t{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.modal-head .timer{font-family:'Space Mono',monospace; font-size:15px; color:var(--seal)}
.modal-body{padding:24px}
.x{all:unset; cursor:pointer; color:var(--faint); font-family:'Space Mono',monospace; font-size:15px}
.x:focus-visible{outline:2px solid var(--seal); outline-offset:2px}

.arena{position:relative; width:100%; aspect-ratio:16/11; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, var(--seal-soft), var(--paper-2)); touch-action:none}
.target{position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:2px solid var(--seal);
  background:radial-gradient(circle, rgba(18,133,122,.22), transparent 70%); display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:13px; color:var(--seal-deep); cursor:pointer; animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.arena .hint{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px}
.arena .hint p{color:var(--muted); font-size:14px; max-width:34ch; line-height:1.5; margin:0}
.dots{display:flex; gap:6px; justify-content:center; margin-top:14px}
.dots i{width:8px; height:8px; border-radius:50%; background:var(--line-2); display:block}
.dots i.on{background:var(--seal)}

.center{text-align:center}
.strike-no{font-family:Fraunces; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 4px}
.strike-big{font-family:'Space Mono',monospace; font-weight:700; font-size:44px; margin:0}
.strike-big .slash{color:var(--faint)}
.note{font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); line-height:1.7}
.commit-line{border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:18px 0; background:var(--paper-2);
  font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); text-align:left; line-height:1.9}
.commit-line b{color:var(--seal); font-weight:400}
.commit-line .irr{color:var(--danger)}
.await{display:flex; align-items:center; justify-content:center; gap:10px; color:var(--seal); font-family:'Space Mono',monospace; font-size:12px}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--seal-soft);border-top-color:var(--seal);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.reveal-seal{display:flex; justify-content:center; margin:4px 0 16px}
.reveal-seal svg{width:180px; height:180px}
.tier-reveal{font-family:Fraunces; font-weight:600; font-size:32px; margin:0}
.miss-title{font-family:Fraunces; font-weight:600; font-size:28px; color:var(--danger); margin:0 0 8px}

.foot{margin-top:36px; padding-top:18px; border-top:1px solid var(--line);
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--faint); line-height:1.9}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .profile-grid{grid-template-columns:1fr}
  .pub-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .event-body{grid-template-columns:1fr; text-align:left}
  .badge-face{width:96px}
  .enter-col{align-items:stretch}
  .enter-note{text-align:left}
  .id-strip{flex-direction:column; align-items:flex-start; gap:6px}
  .avatar{margin-top:-56px}
  .id-side{width:100%; justify-content:space-between; margin-top:4px}
  .banner{height:150px}
  .two{grid-template-columns:1fr}
  .strike-big{font-size:36px}
  .hbar{gap:10px}
  .mark{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}