@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
.settings-intro{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:24px;border:1px solid #725c38;background:linear-gradient(135deg,#202923,#151b19)}
.settings-intro h1{margin:4px 0 8px;font:600 30px Cinzel;color:#ead8b2}
.xp-scale-badge{display:grid;place-items:center;width:110px;height:110px;border:2px solid #bd9556;border-radius:50%;color:#edcf91;text-align:center;font:700 24px Cinzel}
.xp-scale-badge small{font:700 8px sans-serif;letter-spacing:.12em}
.skill-tutorial-grid{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:12px}
.skill-tutorial-card{display:flex;flex-direction:column;gap:7px;min-height:185px;padding:16px;border:1px solid var(--line);background:linear-gradient(150deg,#1d2523,#121717)}
.skill-tutorial-card.completed{border-color:#46775b}
.skill-tutorial-card h3{margin:0;color:#e6d4aa;font:600 16px Cinzel}
.skill-tutorial-card .tutorial-reward{color:#d5ae69;font-size:11px}
.skill-tutorial-card .tutorial-done{color:#6fc18f;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.skill-tutorial-card button{margin-top:auto}
@media(max-width:900px){.skill-tutorial-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.settings-intro{grid-template-columns:1fr}
.xp-scale-badge{width:82px;height:82px}
.skill-tutorial-grid{grid-template-columns:1fr}
}

:root{--bg:#090c12;--panel:#10151e;--panel2:#151c26;--line:#26303c;--gold:#c49a5a;--gold2:#ead39d;--text:#e9edf2;--muted:#8c98a7;--green:#60a97d;--red:#c46565;--blue:#608fb5}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 45% -10%,#25303c 0,#090c12 38%);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh}
button,input{font:inherit}
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.25fr .75fr}
.auth-art{display:flex;flex-direction:column;justify-content:center;padding:10vw;background:linear-gradient(90deg,rgba(9,12,18,.15),#090c12),radial-gradient(circle at 25% 45%,#32402e,#10151e 45%,#090c12 72%)}
.auth-art h1{font:700 clamp(54px,8vw,110px)/.85 Cinzel;margin:18px 0;color:#efe8d9;text-shadow:0 5px 25px #000}
.auth-art h1 i{color:var(--gold);font-weight:500}
.auth-art>p:last-child{max-width:520px;color:#aeb6bf;line-height:1.7}
.sigil,.mini-sigil{border:1px solid var(--gold);color:var(--gold2);display:grid;place-items:center;font-family:Cinzel}
.sigil{width:72px;height:72px;transform:rotate(45deg);margin-bottom:45px}
.sigil::first-line{transform:rotate(-45deg)}
.auth-card{align-self:center;margin:40px;max-width:430px;display:grid;gap:22px;padding:42px;background:rgba(16,21,30,.9);border:1px solid var(--line);box-shadow:0 25px 70px #0008}
.auth-card h2{font:600 30px Cinzel;margin:8px 0}
.auth-card label{display:grid;gap:8px;color:#aeb6bf;font-size:12px}
.auth-card input{background:#090d13;border:1px solid #303b48;color:white;padding:14px;outline:none}
.auth-card input:focus{border-color:var(--gold)}
.primary{border:0;background:linear-gradient(135deg,#d1aa6b,#9b7038);color:#12100b;padding:14px;font-weight:800;cursor:pointer}
.text-button,.logout{border:0;background:none;color:#9ba6b2;cursor:pointer}
.fine{font-size:10px;line-height:1.5;color:#67717e}
.game{display:grid;grid-template-columns:210px minmax(500px,1fr) 260px;min-height:100vh}
.game>aside{background:#0c1118;border-right:1px solid var(--line);padding:24px 14px;position:sticky;top:0;height:100vh}
.brand{display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:0 10px 30px}
.mini-sigil{width:34px;height:34px;grid-row:1/3}
.brand b{font:600 17px Cinzel}
.brand small{font-size:8px;letter-spacing:.3em;color:var(--gold)}
nav{display:grid;gap:5px}
nav button,.logout{width:100%;text-align:left;padding:11px 14px;border:0;border-left:2px solid transparent;background:transparent;color:#8995a3;cursor:pointer}
nav button:hover,nav button.active{background:linear-gradient(90deg,#c49a5a17,transparent);border-left-color:var(--gold);color:var(--gold2)}
nav button span,.logout span{margin-left:12px}
.logout{position:absolute;bottom:25px}
.game main{padding:26px 34px 60px;min-width:0}
.game header{height:72px;display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);margin-bottom:28px}
.game header h2{font:600 25px Cinzel;margin:5px 0}
.game header p{margin:0}
.header-stats{display:flex;gap:25px;align-items:center;color:var(--gold2)}
.avatar{display:grid;place-items:center;border:1px solid var(--gold);width:38px;height:38px;border-radius:50%}
.right-rail{border-left:1px solid var(--line)!important;border-right:0!important;padding:32px 24px!important}
.right-rail h3{font:600 21px Cinzel}
.level-ring{width:150px;height:150px;border-radius:50%;margin:32px auto;display:grid;place-content:center;text-align:center;border:4px solid #293542;box-shadow:inset 0 0 0 6px #10151e,0 0 35px #c49a5a16;background:conic-gradient(var(--gold) 20%,#293542 0)}
.level-ring b{font:600 42px Cinzel;color:var(--gold2)}
.level-ring small{font-size:8px;letter-spacing:.15em;color:var(--muted)}
.rail-block{border-top:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between;font-size:12px}
.rail-block span{color:var(--muted)}
.recent{margin-top:30px}
.note{font:italic 13px/1.6 Georgia;color:#9ca7b4;padding:14px;border-left:2px solid var(--gold);background:#141a22}
.hero-banner{padding:30px;border:1px solid #39412f;background:linear-gradient(100deg,#1c2b25,#131a20 65%,#2f2218);display:grid;grid-template-columns:1fr auto;gap:20px;margin-bottom:20px}
.hero-banner h1{font:600 30px Cinzel;margin:8px 0}
.muted{color:var(--muted);font-size:13px;line-height:1.5}
.stat-grid,.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat,.card{border:1px solid var(--line);background:linear-gradient(145deg,#151c26,#10151e);padding:18px}
.stat small,.card small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.stat b{font:600 23px Cinzel;display:block;margin:7px 0}
.section-title{font:600 18px Cinzel;margin:28px 0 14px}
.action-card{position:relative;overflow:hidden}
.action-card h3,.card h3{font:600 16px Cinzel;margin:10px 0}
.action-card button,.card button{margin-top:12px}
.progress{height:5px;background:#29313b;margin:12px 0}
.progress i{height:100%;display:block;background:linear-gradient(90deg,#8a683c,var(--gold2))}
.tag{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold2);border:1px solid #705b39;padding:4px 6px}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
.item{min-height:105px;padding:14px;border:1px solid var(--line);background:#121822;position:relative}
.item .qty{position:absolute;right:9px;top:9px;color:var(--gold2);font-weight:700}
.item strong{display:block;margin-top:28px;font:500 13px Cinzel}
.rarity-rare{border-color:#41688d}
.rarity-epic{border-color:#7957a7}
.rarity-legendary{border-color:#b68a4b}
.toast{position:fixed;z-index:20;right:25px;bottom:25px;background:#17221d;border:1px solid var(--green);padding:14px 20px;transform:translateY(100px);opacity:0;transition:.25s}
.toast.show{transform:none;opacity:1}
.danger{color:#e58b8b}
.empty{padding:30px;text-align:center;border:1px dashed var(--line);color:var(--muted)}
@media(max-width:1050px){.game{grid-template-columns:78px 1fr}
.right-rail{display:none}
.brand{grid-template-columns:42px}
.brand b,.brand small,nav span,.logout span{display:none}
.stat-grid,.card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){.auth-shell{display:block;padding:20px}
.auth-art{display:none}
.auth-card{margin:8vh auto;padding:28px}
.game{display:block}
.game>aside{position:fixed;z-index:10;bottom:0;top:auto;width:100%;height:65px;padding:7px;border:0;border-top:1px solid var(--line)}
.brand,.logout{display:none}
nav{display:flex;justify-content:space-around}
nav button{font-size:18px;text-align:center;padding:12px 5px;border-left:0;border-bottom:2px solid transparent}
nav button.active{border-bottom-color:var(--gold)}
nav button:nth-child(n+6){display:none}
nav button[data-page="world"]{display:block}
.game main{padding:18px 15px 90px}
.stat-grid,.card-grid{grid-template-columns:1fr}
.hero-banner{grid-template-columns:1fr}
.game header{height:60px}
.header-stats{gap:12px}
}

.drop-table{display:grid;gap:5px;margin:12px 0;padding:9px;border:1px solid #4e4028;background:#0d0e0b;color:#cbb98d;font-size:12px}
.drop-table>b{color:#dfbd68;font:700 11px Cinzel,Georgia,serif;letter-spacing:.08em}
.drop-table span{display:flex;justify-content:space-between;gap:8px}
.drop-table em{color:#a9c379;font-style:normal;white-space:nowrap}
.bank-storage{margin-top:18px;padding:20px;border:1px solid #5b4a2b;background:linear-gradient(110deg,#171710,#11181b)}.bank-storage h2{font:600 22px Cinzel;margin:6px 0}.bank-storage .runescape-pack{margin-top:15px}.bank-item{min-height:165px}.bank-item button{display:block}
.combat-readout{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;margin-bottom:18px;border:1px solid #684b2b;background:linear-gradient(100deg,#251b12,#151c22)}.combat-readout h2{font:600 22px Cinzel;margin:6px 0}.combat-stat{min-width:125px;text-align:center;border-left:1px solid #735937;padding-left:22px}.combat-stat b{display:block;color:#f0cd74;font:600 36px Cinzel}.combat-stat small,.combat-metrics small{display:block;color:#aa9570;font-size:8px;letter-spacing:.12em}.monster-hp{margin:12px 0}.monster-hp>div{display:flex;justify-content:space-between;align-items:baseline}.monster-hp b{color:#edbf78}.monster-hp span{color:var(--muted);font-size:10px}.monster-hp>i{display:block;height:9px;margin-top:5px;background:#351b1c;border:1px solid #6c3232}.monster-hp em{display:block;height:100%;background:linear-gradient(90deg,#bb3e3e,#e07753)}.combat-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0}.combat-metrics span{padding:7px;border:1px solid #35404b;background:#111820}.combat-metrics b{display:block;color:#e8d293;font:600 16px Cinzel;margin-top:3px}

.pack-header{display:flex;justify-content:space-between;gap:20px;padding:22px 24px;border:1px solid #564425;background:linear-gradient(110deg,#211a10,#10161b 65%,#172016)}
.pack-header h1{font:600 28px Cinzel;margin:7px 0}.pack-header p{max-width:720px}.pack-capacity{min-width:135px;display:grid;place-content:center;text-align:center;border-left:1px solid #655333;color:var(--gold2)}.pack-capacity b{font:600 36px Cinzel}.pack-capacity small{display:block;font:700 8px Inter;letter-spacing:.14em;color:#a48c58}.pack-capacity span{font-size:10px;color:var(--muted)}
.equipment-board{display:grid;grid-template-columns:minmax(360px,1fr) 1fr;gap:18px;margin-top:16px;border:1px solid #3d4651;background:#0f141a}.equipment-paperdoll{min-height:255px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px;position:relative;background:radial-gradient(circle,#273444,#12171d 62%)}.paperdoll-avatar{position:absolute;inset:49px 39%;display:grid;place-items:center;border:2px solid #796039;border-radius:50%;background:linear-gradient(145deg,#4b5a6b,#171c22);font:700 44px Cinzel;color:#e7c36c;box-shadow:0 0 0 7px #0f141acc}.gear-slot{z-index:1;min-height:67px;border:1px solid #4a5663;background:#10151c;color:#bdc9d5;text-align:left;padding:7px;cursor:pointer}.gear-slot:hover,.gear-slot.filled{border-color:#c49a5a;background:linear-gradient(145deg,#28241a,#151a20)}.gear-slot i{float:left;margin:1px 7px 0 0;font-style:normal;font-size:21px;color:#e5c878}.gear-slot span,.gear-slot b{display:block;font-size:9px}.gear-slot span{text-transform:uppercase;letter-spacing:.1em;color:#8e9baa}.gear-slot b{margin-top:5px;font:600 11px Cinzel;color:#e7edf2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.equipment-summary{padding:28px;display:grid;align-content:center}.equipment-summary h2{font:600 23px Cinzel;margin:7px 0}.equipment-summary button{justify-self:start}
.bank-notice{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;padding:16px 20px;border:1px solid #3d633e;background:linear-gradient(90deg,#122016,#121a1b)}.bank-notice>div{display:flex;gap:14px;align-items:center}.bank-notice>div>span{font-size:31px;color:#d8ba65}.bank-notice h3,.bank-notice p{margin:3px 0}.runescape-pack{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px;padding:12px;border:1px solid #3b3222;background:#0a0d10}.pack-item{position:relative;min-height:145px;padding:11px 9px;border:1px solid #50442e;background:linear-gradient(145deg,#202018,#131613);box-shadow:inset 0 0 0 2px #090a08}.pack-item:hover{border-color:#c49a5a;transform:translateY(-1px)}.pack-item .pack-icon{display:grid;place-items:center;width:46px;height:43px;margin-bottom:4px;border:1px solid #685739;background:#10130f;color:#e4c76f;font-size:24px}.pack-item .qty{position:absolute;right:8px;top:8px;color:#f0dd8c;text-shadow:1px 1px #000;font-size:12px}.pack-item strong{display:block;font:600 12px Cinzel;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pack-item small{display:block;margin-top:3px;font-size:8px;text-transform:uppercase;color:#a39b86}.pack-item .item-stats,.pack-item .item-requirements{display:block;margin-top:5px;font-size:9px;color:#9fc1aa}.pack-item .item-requirements{color:#caaf80}.pack-item button{padding:4px 0;margin-top:4px;font-size:10px;color:#ead08a}
.shop-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px;padding:24px;border:1px solid #73582f;background:radial-gradient(circle at 85% 20%,#47341b55,transparent 35%),linear-gradient(110deg,#211a10,#10171a 68%)}.shop-hero h1{margin:6px 0;font:600 28px Cinzel;color:#ead08a}.shop-hero p{max-width:700px;color:#a9a18e;line-height:1.55}.shop-wallet{min-width:190px;padding:15px 18px;border:1px solid #7a6034;background:#0d100d;box-shadow:inset 0 0 18px #d9a6410b;text-align:right}.shop-wallet small{display:block;color:#9b8b69;font-size:9px;letter-spacing:.14em}.shop-wallet b{display:block;margin:5px 0 12px;color:#f0ce72;font:600 21px Cinzel}.npc-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}.npc-shop-card{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:14px;border:1px solid #4f432c;background:linear-gradient(145deg,#1c1b15,#101412);box-shadow:inset 0 0 0 2px #090b08}.npc-shop-card:hover{border-color:#a7813e}.npc-shop-card .pack-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid #735e36;background:#0d100c;color:#e7c86d;font-size:24px}.npc-shop-card h3{margin:2px 0 5px;font:600 14px Cinzel;color:#e9d7a0}.npc-shop-card p{margin:0;font-size:10px}.npc-shop-card dl{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin:4px 0 0;border:1px solid #393527}.npc-shop-card dl>div{padding:8px 10px}.npc-shop-card dl>div+div{border-left:1px solid #393527}.npc-shop-card dt{font-size:8px;letter-spacing:.12em;color:#8d866f}.npc-shop-card dd{margin:4px 0 0;color:#e6c66d;font:600 13px Cinzel}.shop-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px}.shop-actions button{margin:0;min-height:34px}.legal-copy{margin-top:14px;padding:10px 12px;border-left:2px solid #6e5831;color:#827d70;font-size:10px;line-height:1.5}
@media(max-width:700px){.pack-header,.bank-notice{display:block}.pack-capacity{border:0;margin-top:12px}.equipment-board{grid-template-columns:1fr}.equipment-paperdoll{min-height:225px}.bank-notice>div{margin-bottom:10px}}
@media(max-width:700px){.shop-hero{align-items:stretch;flex-direction:column;padding:18px}.shop-wallet{text-align:left}.npc-shop-grid{grid-template-columns:1fr}}

.quest-hero{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:26px;margin-bottom:18px;border:1px solid #705633;background:radial-gradient(circle at 88% 12%,#74502b55,transparent 34%),linear-gradient(115deg,#261c12,#11171b 68%);box-shadow:inset 0 0 0 2px #0b0c09}.quest-hero h1{margin:6px 0;font:600 29px Cinzel;color:#ecd38b}.quest-hero p:not(.eyebrow){max-width:760px;color:#b3aa96;line-height:1.6}.quest-tally{display:grid;grid-template-columns:1fr 1fr;min-width:220px;border:1px solid #594a31;background:#0b0e0c}.quest-tally span{padding:15px;text-align:center;color:#97896b;font-size:8px;letter-spacing:.12em}.quest-tally span+span{border-left:1px solid #594a31}.quest-tally b{display:block;margin-bottom:4px;color:#edcb73;font:600 27px Cinzel}.quest-journal{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:13px}.quest-card{display:flex;flex-direction:column;padding:18px;border:1px solid #51442e;background:linear-gradient(145deg,#1c1a14,#101412);box-shadow:inset 0 0 0 2px #090b08}.quest-card.selected{border-color:#ca9e51;box-shadow:inset 0 0 0 2px #090b08,0 0 22px #b8852830}.quest-card.status-active{border-left:4px solid #d0a34d}.quest-card.status-completed{border-left:4px solid #60815f}.quest-card>header{display:flex;align-items:center;gap:12px}.quest-card h2{margin:4px 0;font:600 19px Cinzel;color:#e9d39b}.quest-card>p{min-height:42px;color:#a9a18d;line-height:1.5}.quest-seal{display:grid;place-items:center;width:43px;height:43px;border:1px solid #826737;background:#11140f;color:#edc86c;font:600 20px Cinzel}.quest-card ol{display:grid;gap:5px;padding:0;margin:12px 0;list-style:none}.quest-card li{display:flex;gap:8px;padding:8px;border:1px solid #323127;background:#0c0f0d;color:#817d70}.quest-card li i{display:grid;place-items:center;min-width:25px;height:25px;border:1px solid #4a4536;color:#9c8e70;font-style:normal;font-size:10px}.quest-card li span{display:flex;flex:1;justify-content:space-between;gap:8px;align-items:center;font-size:11px}.quest-card li small{color:#8d866f;white-space:nowrap}.quest-card li.current{border-color:#725c33;color:#e2c983}.quest-card li.current i{background:#4a391c;color:#ffdc78}.quest-card li.done{color:#8fac8d}.quest-card li.done i{border-color:#486848;background:#1a2c1b;color:#a8d2a5}.quest-progress{margin:4px 0 12px}.quest-progress>span{display:flex;justify-content:space-between;gap:10px;color:#d5c08b;font-size:10px}.quest-progress>i{display:block;height:8px;margin-top:5px;border:1px solid #574626;background:#17130d}.quest-progress em{display:block;height:100%;background:linear-gradient(90deg,#806127,#dfad4e)}.quest-rewards{display:grid;gap:4px;margin-top:auto;padding:10px;border:1px solid #3d392a;background:#11130f}.quest-rewards b{font-size:8px;letter-spacing:.13em;color:#a98c52}.quest-rewards span{color:#c8b98e;font-size:10px}.quest-card button{margin-top:10px}.quest-complete{display:block;margin-top:10px;padding:9px;border:1px solid #456044;background:#162318;color:#9cc19a;text-align:center;font-size:10px}
@media(max-width:700px){.quest-hero{align-items:stretch;flex-direction:column;padding:18px}.quest-tally{min-width:0}.quest-journal{grid-template-columns:1fr}.quest-card>p{min-height:0}}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,[role="button"],canvas{touch-action:manipulation}.game{padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}.danger-button{border-color:#9b3939!important;color:#ffb0a8!important}.account-controls{margin-top:24px}
