@font-face{font-family:'Pretendard';font-weight:45 920;font-style:normal;font-display:swap;src:url('/fonts/PretendardVariable.woff2') format('woff2-variations')}
  :root{
    --bg:#03060a; --panel:#06090d; --line:#12211a; --line2:#1c2e26;
    --txt:#dce8df; --txt2:#9db0a4; --mut:#61766a; --dim:#3b4b43;
    --cy:#33e19a; --cy-dim:#1a6e4d; --am:#ffb454;
    --sans:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:15px;line-height:1.55;
    -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
    background-image:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 3px),linear-gradient(90deg,rgba(51,225,154,.03) 1px,transparent 1px);
    background-size:100% 3px,46px 46px;background-attachment:fixed}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1160px;margin:0 auto;padding:0 18px 80px}
  header{display:flex;align-items:center;gap:14px;padding:12px 0 10px}
  .logo{font-weight:800;font-size:22px;letter-spacing:-.035em;color:#eef4f0;line-height:1}
  .logo b{color:var(--cy)}
  .mock{font-size:11px;color:var(--am);border:1px solid rgba(255,180,84,.4);padding:2px 7px;letter-spacing:.04em}
  nav.top{margin-left:auto;display:flex;gap:2px}
  nav.top a{padding:7px 12px;font-size:13.5px;color:var(--mut);border-bottom:2px solid transparent}
  nav.top a:hover{color:var(--txt2)}
  nav.top a.on{color:var(--txt);border-bottom-color:var(--cy)}
  .topline{height:1px;background:linear-gradient(90deg,rgba(51,225,154,.55),rgba(51,225,154,.14) 24%,transparent 52%);margin-bottom:26px}

  /* ---- hero: search is the page ---- */
  .hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:end;margin-bottom:26px}
  h1{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:0 0 10px;text-wrap:balance}
  h1 b{color:var(--cy);font-weight:800}
  .lede{color:var(--txt2);font-size:15px;margin:0 0 18px;max-width:52ch}
  .sbox{position:relative}
  .sbox input{width:100%;background:var(--panel);border:1px solid var(--line2);color:var(--txt);font:inherit;font-size:16px;padding:13px 15px;border-radius:2px}
  .sbox input::placeholder{color:var(--dim)}
  .sbox input:focus{outline:0;border-color:var(--cy)}
  .sbox kbd{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:inherit;font-size:11.5px;color:var(--mut);border:1px solid var(--line2);padding:1px 6px;border-radius:2px}
  .res{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#070b10;border:1px solid var(--line2);z-index:10;max-height:330px;overflow:auto;display:none}
  .res.on{display:block}
  .res a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:8px 13px;align-items:baseline;border-bottom:1px solid var(--line)}
  .res a:last-child{border-bottom:0}
  .res a:hover,.res a.k{background:rgba(51,225,154,.07)}
  .res i{font-style:normal;font-size:11.5px;color:var(--cy)}
  .res b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .res span{font-size:12px;color:var(--mut);white-space:nowrap}
  .res .none{padding:13px;color:var(--mut);font-size:13.5px}
  .try{font-size:12.5px;color:var(--mut);margin-top:9px}
  .try a{color:var(--txt2);border-bottom:1px solid var(--line2);margin-left:8px}
  .try a:hover{color:var(--cy);border-color:var(--cy-dim)}
  .tot{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .tot div{background:var(--panel);padding:14px 16px}
  .tot span{display:block;font-size:12px;color:var(--mut)}
  .tot b{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
  .tot em{font-style:normal;font-size:11.5px;color:var(--mut);display:block}

  h2{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:0;display:flex;align-items:baseline;gap:10px}
  h2 small{font-size:12.5px;font-weight:400;color:var(--mut)}
  .sh{display:flex;align-items:baseline;margin:30px 0 11px;gap:12px;flex-wrap:wrap}
  .sh a.more{margin-left:auto;font-size:13px;color:var(--txt2)}
  .sh a.more:hover{color:var(--cy)}
  .chips{display:flex;gap:5px;margin-left:auto}
  .chip{appearance:none;background:none;border:1px solid var(--line2);color:var(--txt2);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:2px;cursor:pointer}
  .chip:hover{border-color:var(--cy-dim);color:var(--txt)}
  .chip.on{border-color:var(--cy);color:var(--cy);background:rgba(51,225,154,.07)}

  /* ---- classes ---- */
  .classes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .cls{background:var(--panel);padding:14px 8px 12px;text-align:center;display:block;position:relative}
  .cls:hover{background:#0a1210}
  .cls img{width:30px;height:30px;display:block;margin:0 auto 7px}
  .cls b{display:block;font-size:14px;font-weight:700}
  .cls span{display:block;font-size:11.5px;color:var(--mut)}
  .cls u{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cy-dim);text-decoration:none;transform-origin:left}
  .cls.soon b{color:var(--txt2)}

  /* ---- dungeons ---- */
  .dg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
  .drow{position:relative;overflow:hidden;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-left:2px solid #16221a;border-radius:2px}
  .drow>:not(.bar){position:relative;z-index:1}
  .drow .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(51,225,154,.13),rgba(51,225,154,.02));z-index:0}
  .drow:hover{border-left-color:var(--cy)}
  .dcat{font-size:11.5px;color:var(--txt2);border:1px solid var(--line2);text-align:center;padding:1px 0;border-radius:2px}
  .dn{min-width:0}
  .dn b{display:block;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dn span{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .dt{text-align:right;line-height:1.25}
  .dt b{font-size:15px;font-weight:700}
  .dt span{display:block;font-size:10.5px;color:var(--mut)}
  .dc{text-align:right;line-height:1.25;min-width:54px}
  .dc b{font-size:13.5px;font-weight:600;color:var(--txt2)}
  .dc span{display:block;font-size:10.5px;color:var(--mut)}
  .soon-tag{font-size:10.5px;color:var(--dim);margin-left:6px;font-weight:400}

  .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px}
  .lrow{display:grid;grid-template-columns:20px 34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
  .lrow:last-child{border-bottom:0}
  .lrow i{font-style:normal;font-size:12px;font-weight:700;color:var(--dim);text-align:right}
  .lrow:nth-child(-n+3) i{color:var(--cy)}
  .lrow img{width:34px;height:34px;border-radius:3px;border:1px solid #17271f;display:block}
  .lrow .ord{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line2);font-size:12px;color:var(--txt2);font-weight:700}
  .lrow .n{min-width:0}
  .lrow .n b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lrow .n span{font-size:11.5px;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lrow .v{text-align:right;line-height:1.25}
  .lrow .v b{font-weight:700}
  .lrow .v span{display:block;font-size:10.5px;color:var(--mut)}

  .how{margin-top:34px;border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--mut);max-width:72ch}
  .how b{color:var(--txt2);font-weight:600}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr;gap:18px}
    .classes{grid-template-columns:repeat(3,minmax(0,1fr))}
    .dg{grid-template-columns:1fr}
    .two{grid-template-columns:1fr}
    h1{font-size:27px}
    nav.top a{padding:7px 8px;font-size:13px}
  }
  @media (max-width:480px){
    nav.top a:nth-child(n+4){display:none}
    .sbox kbd{display:none}
    .drow{grid-template-columns:38px minmax(0,1fr) auto;gap:9px}.dc{display:none}
    .chips{margin-left:0;width:100%;overflow-x:auto}
    .tot b{font-size:22px}
  }

/* ---- landing: hub head, open records, sealed archive ---- */
.hub{margin-bottom:22px}
.hub h1{font-size:32px;margin:0 0 6px}
.hub .lede{margin:0 0 12px;max-width:70ch}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.bdg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);border:1px solid var(--line2);padding:3px 9px;border-radius:2px;white-space:nowrap}
.bdg.live{color:var(--cy);border-color:var(--cy-dim)}
.bdg i{width:6px;height:6px;border-radius:50%;background:var(--cy);display:inline-block}
.hub .sbox{max-width:640px}
.pico .d{fill:#16362a}.pico .m{fill:#2a9a6c}.pico .h{fill:#7af0c0}.pico .g{fill:#ffb454}

.open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* frame with cut corners: the border is the outer shape, the panel sits 1px inside it */
.fr{--cut:12px;position:relative;padding:17px 18px 16px;background:var(--line2);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));display:flex;flex-direction:column;min-width:0}
.fr::before{content:"";position:absolute;inset:1px;background:linear-gradient(180deg,#0a1310,var(--panel) 46%);z-index:0;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.fr::after{content:"";position:absolute;left:var(--cut);right:38%;top:0;height:2px;background:var(--cy);z-index:1}
.fr-boss::after{background:var(--hot,#ff5f57)}
.fr-dg::after{background:var(--am)}
.fr>*{position:relative;z-index:1}
.fr header{display:flex;align-items:center;gap:12px;padding:0}
.fr header .pico{width:34px;height:34px;flex:0 0 auto;image-rendering:pixelated}
.fr header div{min-width:0}
.fr header b{display:block;font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.fr header span{font-size:12.5px;color:var(--txt2)}
.fr .go{margin-left:auto;font-size:12.5px;color:var(--cy);border:1px solid var(--cy-dim);padding:4px 12px;border-radius:2px;white-space:nowrap}
.fr .go:hover{background:rgba(51,225,154,.1)}
.fr p{margin:10px 0 13px;font-size:13px;color:var(--mut)}
.emblems{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:auto}
.emblems a{display:flex;align-items:center;gap:8px;padding:8px 9px;background:#070c10;font-size:13px;color:var(--txt2);min-width:0}
.emblems a:hover{background:#0c1512;color:var(--txt)}
.emblems img{width:20px;height:20px;flex:0 0 auto}
.emblems span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runs{display:flex;flex-direction:column;margin-top:auto}
.runs a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.runs a:hover b{color:var(--cy)}
.runs .rc{font-size:11px;color:var(--am);border:1px solid rgba(255,180,84,.35);padding:0 6px;border-radius:2px;white-space:nowrap}
.runs b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runs em{font-style:normal;font-weight:700;font-size:15px}
.hpl{display:flex;flex-direction:column;gap:11px;margin-top:auto}
.hpl a{display:block}
.hpl .hn{display:flex;align-items:baseline;gap:8px;min-width:0}
.hpl .hn b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpl .hn i{font-style:normal;font-size:10.5px;color:#ff8f89;border:1px solid rgba(255,95,87,.4);padding:0 5px;border-radius:2px;white-space:nowrap}
.hpl a:hover .hn b{color:#ff8f89}
/* boss HP bar: segmented like the in-game one */
.hpl .hp{display:block;height:9px;margin:5px 0 4px;background:#170b0b;border:1px solid #3a1614;position:relative;overflow:hidden}
.hpl .hp u{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#ff7a72,#c2362f);text-decoration:none}
.hpl .hp::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(3,6,10,.75) calc(10% - 1px) 10%)}
.hpl .hv{font-size:11.5px;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpl .hv b{color:var(--txt2);font-weight:600}

/* categories that are not open yet: same frame, quieter */
.lockgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fr-lock{--cut:10px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 12px;padding:15px 16px 12px;background:var(--line)}
.fr-lock::before{background:#05080b}
.fr-lock::after{background:var(--line2);right:70%}
.fr-lock>.pico{width:30px;height:30px;image-rendering:pixelated;opacity:.5;filter:saturate(.35);transition:opacity .15s,filter .15s}
.fr-lock .lk{min-width:0}
.fr-lock .lk b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--txt2);line-height:1.25}
.fr-lock .lk span{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.fr-lock footer{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.fr-lock footer .pico{width:13px;height:13px;opacity:.6;filter:saturate(.3)}
.fr-lock footer em{font-style:normal}
.fr-lock footer i{font-style:normal;margin-left:auto;color:var(--am);font-size:11.5px}
.fr-lock:hover>.pico{opacity:.85;filter:none}
.fr-lock:hover .lk b{color:var(--txt)}
@media (max-width:980px){.open{grid-template-columns:1fr}.hub h1{font-size:26px}.lockgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fr{padding:15px 14px 14px}.fr header b{font-size:17px}.lockgrid{gap:8px}.fr-lock{padding:12px 12px 10px;grid-template-columns:24px minmax(0,1fr);gap:4px 9px}.fr-lock>.pico{width:24px;height:24px}.fr-lock .lk b{font-size:14.5px}.fr-lock .lk span{display:none}}

/* ---- everything above the fold: compact head, three open cards, nine tiles in one row ---- */
.topline{margin-bottom:14px !important}
.hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:0 28px;align-items:end;margin-bottom:12px}
.hub h1{grid-column:1;font-size:28px;margin:0 0 3px}
.hub .lede{grid-column:1;margin:0 0 9px;font-size:13.5px}
.hub .badges{grid-column:1;margin:0}
.hub .sbox{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:none;margin-bottom:9px}
.hub .sbox input{padding:10px 13px;font-size:15px}
.hub .try{grid-column:2;grid-row:3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh{margin:16px 0 8px !important}
.open{gap:10px}
.fr{padding:13px 16px 13px}
.fr header .pico{width:30px;height:30px}
.fr header b{font-size:17.5px}
.fr p{margin:7px 0 9px;font-size:12.5px}
.emblems a{padding:6px 8px;font-size:12.5px}
.runs a{padding:6px 0}
.hpl{gap:7px}
.hpl .hp{height:8px;margin:4px 0 3px}
.lockgrid{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.fr-lock{--cut:8px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:12px 6px 9px}
.fr-lock>.pico{width:28px;height:28px}
.fr-lock .lk b{font-size:13.5px;white-space:nowrap}
.fr-lock .lk span{display:none}
.fr-lock footer{margin:0;padding:0;border:0;gap:4px;font-size:11px;flex-wrap:wrap;justify-content:center;line-height:1.3}
.fr-lock footer .pico{width:11px;height:11px}
.fr-lock footer i{margin-left:0;flex-basis:100%;font-size:10.5px}
.fr-lock::after{left:22%;right:22%}
@media (max-width:980px){
  .hub{grid-template-columns:1fr}.hub .sbox,.hub .try{grid-column:1;grid-row:auto}.hub .sbox{margin:10px 0 6px}.hub .try{white-space:normal}
  .lockgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:560px){.lockgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.fr-lock{padding:10px 4px 8px;grid-template-columns:none}.fr-lock>.pico{width:24px;height:24px}}

/* ---- tighter head now that the site header and tab rows sit above ---- */
.hub{grid-template-columns:minmax(0,1fr) minmax(280px,400px);align-items:center;margin-bottom:6px;gap:0 24px}
.hub h1{font-size:23px;margin:0;grid-row:1;align-self:center}
.hub .badges{grid-row:2;margin:5px 0 0}
.hub .lede{display:none}
.hub .sbox{grid-row:1;margin:0}
.hub .sbox input{padding:8px 12px;font-size:14px}
.hub .try{grid-row:2;margin:5px 0 0;font-size:12px}
.bdg{font-size:11.5px;padding:2px 8px}
.sh{margin:11px 0 6px !important}
.sh h2{font-size:15px}
.fr{padding:11px 15px 11px}
.fr p{margin:5px 0 7px}
.emblems a{padding:5px 8px}
.runs a{padding:5px 0}
.hpl{gap:5px}
.fr-lock{padding:9px 6px 7px;gap:3px}
.fr-lock>.pico{width:24px;height:24px}
@media (max-width:980px){.hub .lede{display:block;grid-row:auto}.hub h1,.hub .badges,.hub .sbox,.hub .try{grid-row:auto}.hub .sbox{margin:8px 0 4px}}