:root{
  --parch:#d8bd8a; --parch2:#e7d3a6; --wood:#4a3720; --wood2:#2f2313; --woodhi:#6b4f2c;
  --gold:#e6c14e; --gold2:#c9962f; --ink:#241708; --cream:#f4e8c8;
  --green:#54c246; --xp:#ffe23d; --red:#9a3320; --blue:#3f6fb0;
  --fd:"Cinzel",Georgia,serif; --pix:"Pixelify Sans",monospace; --fb:"Inter",system-ui,sans-serif;
  --e:cubic-bezier(.2,.9,.3,1); --rss:1px 1px 0 #1a0f04;   /* runescape hard text shadow */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#e9cf9a;color:var(--ink);font-family:var(--fb);overflow-x:hidden}
#gl{position:fixed;inset:0;z-index:0}
#xpdrops{position:fixed;inset:0;z-index:35;pointer-events:none}
.pix{font-family:var(--pix)}

/* XP drops */
.xp{position:absolute;font-family:var(--pix);font-weight:700;color:var(--xp);text-shadow:var(--rss);font-size:1.3rem;white-space:nowrap;
  animation:xpfloat 1.5s var(--e) forwards}
.xp .sk{color:#fff}
@keyframes xpfloat{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
.lvlup{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);z-index:60;font-family:var(--pix);font-weight:700;color:var(--xp);
  text-shadow:2px 2px 0 #1a0f04;font-size:1.6rem;text-align:center;pointer-events:none;opacity:0}
.lvlup b{display:block;font-size:2.6rem;color:#fff}
.lvlup.go{animation:lvl 2.2s var(--e) forwards}
@keyframes lvl{0%{opacity:0;transform:translate(-50%,-40%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1)}}

/* minimap */
.minimap{position:fixed;top:18px;right:18px;z-index:30;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#6f9a49,#4d7434 70%,#3a5726);
  border:4px solid var(--wood2);box-shadow:0 0 0 3px var(--gold2),0 6px 18px rgba(0,0,0,.4);overflow:hidden}
.minimap .mm-n{position:absolute;top:3px;left:50%;transform:translateX(-50%);font-family:var(--pix);font-size:.7rem;color:var(--xp);text-shadow:var(--rss)}
.minimap .mm-star{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:.7rem}
.mm-dot{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #1a0f04}
.mm-dot.h{background:var(--xp)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,3vw,40px);background:linear-gradient(180deg,rgba(30,20,10,.55),transparent)}
.brand{font-family:var(--fd);font-weight:900;font-size:1.4rem;letter-spacing:.08em;color:var(--gold);text-decoration:none;text-shadow:var(--rss)}
.brand .crest{color:var(--xp)}
.nav .links{display:flex;gap:22px}
.nav .links a{font-family:var(--pix);font-size:.92rem;color:var(--cream);text-decoration:none;text-shadow:var(--rss);opacity:.9;transition:color .2s}
.nav .links a:hover{color:var(--xp)}

/* buttons — RS UI style */
.btn{font-family:var(--pix);font-size:1rem;text-decoration:none;cursor:pointer;border:none;display:inline-block;
  padding:11px 22px;border-radius:4px;text-shadow:var(--rss);transition:transform .12s var(--e),filter .2s;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.3)}
.btn:active{transform:translateY(2px)}
.btn.gold{background:linear-gradient(180deg,#e8b64a,#b9822a);color:#3a2408;border:2px solid #7a531c}
.btn.gold:hover{filter:brightness(1.08)}
.btn.gold.big{padding:15px 34px;font-size:1.2rem}
.btn.stone{background:linear-gradient(180deg,#8a8378,#5c574d);color:var(--cream);border:2px solid #3a362f}
.btn.login{background:linear-gradient(180deg,#6b4f2c,#42301a);color:var(--gold);border:2px solid #2a1d0e;font-size:.9rem;padding:9px 16px}

/* hero */
.hero{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,7vw,110px)}
.kick{color:var(--xp);text-shadow:var(--rss);font-size:.95rem;letter-spacing:.06em}
.hero h1{font-family:var(--fd);font-weight:900;font-size:clamp(3.4rem,12vw,10rem);line-height:.9;letter-spacing:.04em;
  color:var(--gold);text-shadow:3px 3px 0 #1a0f04,0 0 30px rgba(255,200,80,.3);margin:.3rem 0}
.hero .tag{font-family:var(--fb);max-width:38ch;color:var(--cream);font-size:1.15rem;line-height:1.6;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero .cta{margin-top:2rem;display:flex;gap:14px;flex-wrap:wrap}
.scrollcue{margin-top:2.4rem;color:var(--cream);opacity:.8;text-shadow:var(--rss);font-size:.9rem}

/* acts + RS panels */
.act{position:relative;z-index:10;min-height:100vh;display:flex;align-items:center;padding:14vh clamp(20px,5vw,60px)}
.panel.rs{max-width:44rem;width:100%;background:linear-gradient(180deg,#4f3b22,#3a2b18);
  border:3px solid var(--gold2);border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 0 0 2px #1f1509;overflow:hidden}
.panel.rs.wide{max-width:56rem}
.rs-head{background:linear-gradient(180deg,#6b4f2c,#3f2e19);padding:12px 18px;border-bottom:3px solid var(--gold2);
  display:flex;align-items:center;justify-content:space-between}
.rs-head .pix{color:var(--xp);text-shadow:var(--rss);font-size:1.15rem;letter-spacing:.02em}
.rs-head.gold{background:linear-gradient(180deg,#caa03a,#916321)}.rs-head.gold .pix{color:#2a1c08}
.rs-body{background:linear-gradient(180deg,#e7d3a6,#d3b57e);padding:clamp(20px,3vw,34px);color:var(--ink)}
.rs-body h2{font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.02;margin-bottom:.7rem;color:#3a2810}
.rs-body p{line-height:1.65;font-size:1.04rem;color:#40301a;max-width:46ch}
.rs-body .lead{margin-bottom:1.2rem}
.tokens{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.tokens span{font-family:var(--pix);font-size:.82rem;background:#b79763;color:#2a1c08;padding:6px 12px;border-radius:4px;border:1px solid #8a6d3e;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* hiscores */
.hiscores{width:100%;border-collapse:collapse;font-size:.98rem;color:#2a1c08}
.hiscores th{text-align:left;color:#3a2810;border-bottom:2px solid #8a6d3e;padding:8px 10px;font-size:.9rem;letter-spacing:.03em}
.hiscores td{padding:8px 10px;border-bottom:1px solid rgba(90,68,34,.25)}
.hiscores tr:nth-child(even) td{background:rgba(120,92,48,.1)}
.hiscores td:first-child{color:var(--gold2);font-weight:700;width:3rem}
.hiscores td:nth-child(4),.hiscores td:nth-child(5){color:#5a4526}
.ico{display:inline-block;width:11px;height:11px;margin-right:8px;transform:rotate(45deg);background:#7a6a4a;vertical-align:middle}
.ico.owner{background:linear-gradient(135deg,#ffe36a,#d69a2a)}.ico.admin{background:linear-gradient(135deg,#e8e8ee,#9aa0ad)}.ico.mod{background:linear-gradient(135deg,#d59a5a,#9a5f2a)}

/* quest log */
.questlog{list-style:none;display:grid;gap:2px}
.questlog li{position:relative;padding:12px 12px 12px 40px;color:var(--red);cursor:pointer;border-bottom:1px solid rgba(90,68,34,.22);
  font-size:1.02rem;transition:color .2s,background .2s}
.questlog li:hover{background:rgba(120,92,48,.12)}
.questlog li .star{position:absolute;left:14px;color:#8a6d3e}
.questlog li.done{color:var(--green);text-decoration:line-through;text-decoration-color:rgba(84,194,70,.6)}
.questlog li.done .star{color:var(--green)}
.qp{color:var(--xp);text-shadow:var(--rss);font-size:.9rem}
.hint{margin-top:1rem;color:#7a5f34;font-size:.85rem}

/* grand exchange */
.ge{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:.4rem}
.item{background:linear-gradient(180deg,#efdcac,#d8b87e);border:2px solid #8a6d3e;border-radius:6px;padding:16px 12px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:transform .18s var(--e)}
.item:hover{transform:translateY(-4px) rotate(-1deg)}
.item b{display:block;font-family:var(--fb);font-weight:600;margin-top:8px;color:#2a1c08;font-size:.98rem}
.item .pix{font-size:.72rem;color:#7a5f34;display:block;margin-top:2px}
.gi{display:inline-block;width:34px;height:34px;border-radius:5px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.4)}
.gi.phat{background:linear-gradient(135deg,#c451c9,#7a2f8f)}
.gi.dscim{background:linear-gradient(135deg,#57e0d6,#2f93a0);clip-path:polygon(20% 0,100% 60%,60% 100%,0 40%)}
.gi.bond{background:linear-gradient(135deg,#ffe36a,#d69a2a)}
.gi.cape{background:linear-gradient(135deg,#ff8a3a,#c23a1f)}
.gi.rune{background:linear-gradient(135deg,#5fa9e0,#2f6bb0)}
.gi.clue{background:linear-gradient(135deg,#e8e2c0,#b7a56a)}

/* finale */
.finale{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
.finale h2{font-family:var(--fd);font-weight:900;font-size:clamp(2.6rem,8vw,6rem);color:var(--gold);text-shadow:3px 3px 0 #1a0f04}
.finale p{color:var(--cream);max-width:40ch;margin:1rem auto 0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.finale .cta{margin-top:2rem;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
footer{margin-top:10vh;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;color:var(--cream);opacity:.75;text-shadow:var(--rss);font-size:.8rem}

/* chatbox */
.chatbox{position:fixed;left:16px;bottom:16px;z-index:30;max-width:min(46vw,420px);
  background:linear-gradient(180deg,rgba(58,43,24,.92),rgba(38,28,15,.92));border:2px solid var(--gold2);border-radius:6px;
  padding:9px 14px;color:var(--cream);text-shadow:var(--rss);font-size:.9rem;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.chatbox .cline{color:var(--xp)}

/* character select — AI portraits in carved RS frames */
.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:.4rem}
.char{background:linear-gradient(180deg,#efdcac,#d3b57e);border:2px solid #8a6d3e;border-radius:8px;padding:12px;cursor:pointer;text-align:center;font:inherit;
  transition:transform .18s var(--e),box-shadow .18s,border-color .18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.char:hover{transform:translateY(-5px)}
.char.sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold),0 12px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.char .frame{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px;border:3px solid #5a4526;box-shadow:inset 0 0 24px rgba(30,18,4,.5)}
.char .frame img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.03) brightness(.98) sepia(.08);transition:transform .5s var(--e)}
.char:hover .frame img{transform:scale(1.06)}
.char .frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -34px 34px rgba(30,18,4,.4);pointer-events:none}
.char b{display:block;font-family:var(--fd);font-weight:800;margin-top:10px;color:#3a2810;font-size:1.15rem}
.char .cls{color:#7a5f34;font-size:.72rem}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}

@media(max-width:820px){
  #gl{opacity:.85}.minimap{width:84px;height:84px}.nav .links{display:none}
  .act{min-height:auto;padding:12vh 20px}.ge{grid-template-columns:repeat(2,1fr)}.chars{grid-template-columns:1fr}
  .chatbox{max-width:70vw;font-size:.8rem}
}