website/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Emberveil | RuneScape Private Server</title>
  <meta name="description" content="Join Emberveil: old-school Slayer, classic monsters, clue scroll drops and 4x experience. Download the Windows client and play with friends.">
  <meta name="robots" content="index,follow">
  <meta name="theme-color" content="#171712">
  <link rel="canonical" href="https://play.emberveil.net/">
  <meta property="og:title" content="Emberveil | RuneScape Private Server">
  <meta property="og:description" content="Take the task. Hunt the legend. Old-school Slayer and adventures with friends on Emberveil.">
  <meta property="og:image" content="https://play.emberveil.net/assets/kbd-old-school.webp">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://play.emberveil.net/">
  <style>
    :root{color-scheme:dark;--bg:#171712;--ink:#eee9da;--muted:#bab6a4;--line:#3b3b2c;--gold:#ddba76;--fire:#dc7944}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Georgia,serif}a{color:inherit}a:focus-visible{outline:3px solid var(--gold);outline-offset:6px}.wrap{max-width:1160px;margin:auto;padding:0 32px}
    nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:95px;border-bottom:1px solid var(--line)}.brand{font-size:23px;letter-spacing:3px;text-decoration:none}.brand span{color:var(--fire)}.navlink{font:12px/1.5 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--muted)}
    .hero{position:relative;overflow:hidden;min-height:630px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.landscape{position:absolute;right:-90px;bottom:0;width:70%;height:80%;opacity:.75;pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:710px;padding:80px 0 95px}.eyebrow{font:11px/1.6 Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}h1{font-weight:400;letter-spacing:-3px;font-size:clamp(50px,7vw,88px);line-height:1.04;margin:25px 0}h1 em{font-weight:400;color:var(--gold)}.intro{color:var(--muted);max-width:470px;font-size:19px}.cta{display:inline-block;background:var(--gold);color:var(--bg);padding:15px 26px;margin-top:22px;font:700 12px/1.6 Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;text-decoration:none}.subnote{font:12px/1.6 Arial,sans-serif;color:var(--muted);margin-top:18px}
    .facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.fact{padding:30px 0}.fact+.fact{border-left:1px solid var(--line);padding-left:34px}.fact b{font-weight:400;font-size:26px;display:block}.fact span{font:11px Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
    section{padding:80px 0}.section-head{display:grid;grid-template-columns:1fr 1.1fr;gap:65px}h2{font-weight:400;font-size:clamp(32px,4vw,47px);line-height:1.15;margin:15px 0 30px}.features{border-top:1px solid var(--line)}.feature{padding:24px 0;border-bottom:1px solid var(--line)}.feature h3{font-size:23px;font-weight:400;margin:0 0 7px}.feature p{color:var(--muted);margin:0}.number{font:11px Arial,sans-serif;letter-spacing:2px;color:var(--gold);margin-right:15px}.join{background:#222219;border-block:1px solid var(--line);padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}.join h2{margin-top:14px}.status{display:inline-flex;align-items:center;gap:9px;font:11px/1.6 Arial,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold)}.status:before{content:"";width:7px;height:7px;background:var(--gold);border-radius:50%}.join p{color:var(--muted)}.steps{padding-left:20px;color:var(--muted)}.steps li{padding:6px 0}.download-status{font:12px/1.6 Arial,sans-serif;border:1px solid var(--line);padding:15px 18px;margin-top:20px;color:var(--gold)}footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font:12px/1.7 Arial,sans-serif}footer .wrap{display:flex;justify-content:space-between;gap:30px}footer p{margin:0;max-width:610px}
    @media(max-width:700px){.wrap{padding:0 22px}nav{min-height:80px}.brand{font-size:19px}.navlink{font-size:10px;letter-spacing:1px}.hero{min-height:580px}.hero-copy{padding:65px 0}.landscape{width:110%;right:-170px;opacity:.35}.section-head,.join{grid-template-columns:1fr;gap:20px}.join{padding:28px}.facts{grid-template-columns:1fr}.fact{padding:18px 0}.fact+.fact{border-left:0;border-top:1px solid var(--line);padding-left:0}.fact b{font-size:23px}section{padding:55px 0}footer .wrap{flex-direction:column;gap:15px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  .hero{isolation:isolate}.kbd-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#171712 0%,rgba(23,23,18,.95)22%,rgba(23,23,18,.48)49%,rgba(23,23,18,.05)76%)}.hero-copy{max-width:590px}h1{font-size:clamp(50px,6.4vw,78px)}.hero .intro{max-width:410px}.hero .status{width:fit-content;background:rgba(23,23,18,.75)}@media(max-width:700px){.kbd-hero{object-position:62% center;opacity:.65}.hero:after{background:linear-gradient(90deg,rgba(23,23,18,.95),rgba(23,23,18,.62)70%,rgba(23,23,18,.25))}.hero-copy{padding:60px 0 70px}h1{font-size:clamp(43px,10vw,65px)}}

    .play-actions{display:flex;flex-wrap:wrap;gap:12px}.mobile-play{background:#b52b42;color:#fff3eb;border:1px solid #f3657a;box-shadow:0 0 18px #ed19472e}.mobile-play:hover{background:#d33852}.nav-mobile{color:#ff9caa;border:1px solid #884251;padding:8px 12px;border-radius:4px;background:#29151b}
    @media(max-width:700px){nav{flex-wrap:wrap;justify-content:center;gap:10px 16px;padding:12px 0}nav .brand{flex-basis:100%;text-align:center}nav .brand img{max-width:200px}.navlink{white-space:nowrap}.play-actions .cta{margin-top:12px}}
  </style>
  <link rel="stylesheet" href="highscores.css">
  <link rel="stylesheet" href="graffiti.css">
  <link rel="stylesheet" href="highscores-green.css?v=20261018-flames">
  <link rel="preload" href="assets/RubikWetPaint-Regular.ttf" as="font" type="font/ttf" crossorigin>
</head>
<body>
  <div class="wrap"><nav aria-label="Main navigation"><a class="brand" href="#home" aria-label="Emberveil home"><img src="assets/emberveil-bloody-graffiti.webp" alt="Emberveil" width="658" height="260"></a><a class="navlink" href="#highscores">Highscores</a><a class="navlink nav-mobile" href="https://downloads.emberveil.net/mobile/">Mobile</a><a class="navlink" href="#join">Download & play ↗</a></nav></div>
  <main id="home">
    <div class="wrap"><div class="hero">
      <img class="kbd-hero" src="assets/kbd-old-school.webp" alt="The three-headed King Black Dragon in an old-school dungeon" width="1536" height="1024" fetchpriority="high">
      <div class="hero-copy"><div class="eyebrow">Emberveil · Old-school Slayer &amp; adventure</div><h1>Take the task.<br>Hunt the <em>legend.</em></h1><p class="intro">Train your skills, take on Slayer tasks and face the King Black Dragon. An old-school world to explore with friends.</p><div class="play-actions"><a class="cta" href="#join">Download & play</a><a class="cta mobile-play" href="https://downloads.emberveil.net/mobile/">Play on Mobile</a></div><div class="subnote">Mobile browser beta · Turn your phone sideways, tap Load game and sign in.<br>Public playtest open · Owner: bonds</div><div class="status" id="player-count" role="status" aria-live="polite" style="margin-top:12px">Checking players online…</div></div>
    </div><div class="facts"><div class="fact"><b>4× experience</b><span>Current server rates</span></div><div class="fact"><b>Slayer tasks</b><span>Track every hunt in game</span></div><div class="fact"><b>Classic monsters</b><span>From rock crabs to dragons</span></div></div></div>
    <section class="wrap" id="highscores" aria-labelledby="highscores-title">
      <div class="scores-dragon-banner"><img src="assets/highscores-dragon-fire.webp" alt="An old-school green dragon breathing fire across the edge of a dark Wilderness clearing" width="2163" height="727" loading="lazy"><div class="scores-dragon-copy"><div class="eyebrow">Every adventurer. Every level.</div><h2 id="highscores-title">Emberveil highscores</h2><p>Earn your place among the legends.</p></div></div>
      <p class="score-note">Find your name and follow your progress. New players join the rankings after their first character save. Everyone, including the owner and staff, is ranked together.</p>
      <div class="score-layout"><nav class="score-skills" aria-label="Highscore skills" id="score-skill-menu"></nav><div class="score-main">
        <div class="eyebrow">All-time rankings</div><h3 id="score-board-title" class="score-board-title">Overall</h3>
        <div class="score-controls"><label>Rank by<select id="score-skill"><option value="overall">Overall</option></select></label><label>Find a player<input id="score-search" type="search" maxlength="12" placeholder="Game username" autocomplete="off"></label></div>
        <p id="score-status" class="score-note" role="status" aria-live="polite">Loading rankings…</p>
        <div class="score-scroll"><table class="score-table"><caption class="score-sr">Player rankings by selected skill</caption><thead><tr><th scope="col">Rank</th><th scope="col">Player</th><th scope="col" id="score-level-heading">Total level</th><th scope="col">Experience</th></tr></thead><tbody id="score-rows"></tbody></table></div>
        <div class="score-pages"><button id="score-prev" type="button" disabled>Previous</button><span id="score-page"></span><button id="score-next" type="button" disabled>Next</button></div>
        <section id="score-profile" class="score-profile" aria-label="Player skill details" hidden></section>
      </div><aside class="score-arrivals"><div class="eyebrow">Welcome to the world</div><h3>New adventurers</h3><p class="score-note">Players first added since highscores launched.</p><ul id="score-new"><li>Loading new arrivals…</li></ul></aside></div>
      <p class="score-note">Refreshes automatically every 30 seconds using saved game stats. Overall ranks use total level, then total experience. Individual skills rank by experience.</p>
    </section>
    <section class="wrap" aria-labelledby="world-title"><div class="section-head"><div><div class="eyebrow">The next hunt is waiting</div><h2 id="world-title">A task to finish.<br>A legend to face.</h2><p class="intro">Build your combat skills, earn Slayer points and venture into a familiar world of monsters, clues and friends.</p></div><div class="features"><article class="feature"><h3><span class="number">01</span>Slayer with a purpose</h3><p>See your current task, remaining kills and Slayer points in the player information tab. Keep your next goal close at hand.</p></article><article class="feature"><h3><span class="number">02</span>Train for the next fight</h3><p>Start with classic training monsters such as rock crabs, build your skills and gear up for bigger battles.</p></article><article class="feature"><h3><span class="number">03</span>Watch for clue drops</h3><p>Monsters can drop clue scrolls alongside their regular loot. Your next kill could bring something worth investigating.</p></article></div></div></section>
    <section class="wrap" id="join" aria-labelledby="join-title"><div class="join"><div><div class="status">Public playtest open</div><h2 id="join-title">Your next adventure<br>starts here.</h2><p>Emberveil is online. Download the Windows client or try our mobile browser beta with your existing game account. The Windows game opens in its own window.</p></div><div><p>Join from Windows:</p><ol class="steps"><li>Download the Emberveil player ZIP from this page.</li><li>Extract the entire ZIP.</li><li>Open <strong>Play Emberveil Online.bat</strong>.</li><li>Choose a new game username and password to create an account, or use your existing game login. The server address is already set.</li></ol><a class="cta" href="https://downloads.emberveil.net/Emberveil-Player.zip?v=20261018-updater">Download Emberveil for Windows</a><div class="client-update"><strong>Play in your phone's browser</strong><br><a class="cta" href="https://downloads.emberveil.net/mobile/">Open mobile browser beta</a><br>Tap Load game, turn your phone sideways and sign in. Real iPhone and Android testing is still in progress.</div><div class="client-update"><strong>Automatic client updates</strong><br>Normal mouse-wheel zoom, glowing green Slayer information and an animated red-flame owner crown.<br>Already playing? Download and extract this new ZIP once to get the updater. Future client updates are checked when you launch. Larger game-cache updates may still need a fresh ZIP. Your character stays on the server.</div><div class="subnote">Windows ZIP · Java included · Extract before opening<br>New players: design your character and click Accept.<br>This version runs on Windows, outside the webpage.</div></div></div></section>
  </main><footer><div class="wrap"><p>Emberveil · Owned by bonds</p><p>An independent RuneScape private server. Not affiliated with or endorsed by Jagex. RuneScape is a trademark of Jagex.</p></div></footer>
<script src="highscores.js?v=20261018-flames" defer></script><script src="player-count.js" defer></script></body></html>