:root {
    --bg:#090a0d;
    --panel:#12151b;
    --panel2:#181c24;
    --line:#343a45;
    --text:#eee9df;
    --muted:#969ca7;
    --gold:#b99358;
    --gold2:#d9b979;
    --red:#a94d4d;
    --blue:#527da9;
}

* { box-sizing:border-box; }

body {
    margin:0;
    min-height:100vh;
    background:radial-gradient(circle at 50% 0,#282319 0,#0b0c10 48%,#07080a 100%);
    color:var(--text);
    font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.wrap { position:relative; z-index:1; max-width:1180px;margin:auto;padding:26px 18px; }

.brand { text-align:center; }
.brand h1 { margin:0;font:500 42px Georgia,serif;letter-spacing:5px; }
.brand p { color:var(--muted);margin:5px 0 22px; }

.steps { display:flex;justify-content:center;gap:7px;margin-bottom:20px;flex-wrap:wrap; }
.step { padding:7px 13px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:12px; }
.step.active { border-color:var(--gold);color:var(--gold2);background:#1b1710; }

.panel {
    background:linear-gradient(180deg,#15181f,#101319);
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px;
    box-shadow:0 20px 50px #0009;
}

.screen { display:none; }
.screen.active { display:block; }

h2,h3 { font-family:Georgia,serif;font-weight:500; }
.heading h2 { margin:0;font-size:29px; }
.heading p { color:var(--muted);margin:4px 0 18px; }

.cards { display:grid;grid-template-columns:repeat(3,1fr);gap:11px; }

.choice {
    position:relative;
    z-index:2;
    pointer-events:auto;
    border:1px solid var(--line);
    border-radius:9px;
    background:#0d1015;
    padding:14px;
    cursor:pointer;
    transition:border-color .2s,transform .2s,background .2s;
}
.choice:hover { border-color:#766346;transform:translateY(-2px); }
.choice.selected { border-color:var(--gold);background:#1b1711;box-shadow:0 0 0 1px #5e482d inset; }
.choice h3 { font-size:20px;margin:0 0 4px; }
.choice p { color:var(--muted);margin:0 0 9px;font-size:12px; }

.tag { display:inline-block;border:1px solid #3b4049;border-radius:99px;padding:3px 7px;font-size:10px;margin:2px;color:#c9c1b2; }

.creator { display:grid;grid-template-columns:300px 1fr;gap:24px; }

.portrait {
    height:430px;
    border:1px solid var(--line);
    border-radius:42% 42% 30% 30% / 24% 24% 18% 18%;
    background:radial-gradient(circle at 50% 20%,#5b4b35,#211d17 30%,#0c0f14 72%);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.person { width:175px;height:330px;position:relative; }

.head {
    position:absolute;top:20px;left:43px;width:90px;height:105px;
    border-radius:47% 47% 45% 45% / 40% 40% 57% 57%;
    background:linear-gradient(105deg,#8b604d,#c18f6c 35%,#d7a786 53%,#c18f6c 72%,#8b604d);
    box-shadow:inset 10px -12px 18px rgba(0,0,0,.14),inset -5px 7px 14px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.35);
}

.hair {
    position:absolute;top:9px;left:36px;width:104px;height:76px;
    border-radius:55% 55% 30% 30%;background:#292522;z-index:2;
    box-shadow:inset 0 8px 10px rgba(255,255,255,.06),0 7px 12px rgba(0,0,0,.22);
}

.eyes {
    position:absolute;top:72px;left:59px;width:54px;
    display:flex;justify-content:space-between;z-index:3;
}
.eyes i { width:7px;height:5px;background:#211c19;border-radius:50%; }

.nose { position:absolute;top:79px;left:84px;width:7px;height:18px;border-left:2px solid #9e6f55;z-index:3; }

.beard {
    display:none;position:absolute;top:96px;left:53px;width:72px;height:42px;
    background:#302722;border-radius:0 0 48% 48%;z-index:4;
}

.body {
    position:absolute;top:120px;left:13px;width:149px;height:190px;
    border-radius:48px 48px 12px 12px;background:#3e3f42;
}

.formgrid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.field { display:flex;flex-direction:column;gap:5px; }
.field label { color:var(--muted);font-size:10px;letter-spacing:1px; }

input,select {
    width:100%;background:#0c0f14;border:1px solid var(--line);
    color:var(--text);padding:10px;border-radius:7px;outline:none;
}
input:focus,select:focus { border-color:var(--gold); }

.summary { margin-top:15px;padding:14px;background:#0d1015;border:1px solid var(--line);border-radius:8px;color:#c9c1b2; }

.attributes { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px; }
.attr { background:#0d1015;border:1px solid var(--line);border-radius:8px;padding:12px;color:var(--muted); }
.attr b { display:block;margin-top:5px;font-size:20px;color:var(--gold2); }

.buttons { display:flex;justify-content:space-between;gap:10px;margin-top:20px; }

button {
    border:1px solid var(--line);background:#171a20;color:var(--text);
    padding:10px 18px;border-radius:7px;cursor:pointer;transition:.2s;
}
button:hover { border-color:var(--gold);transform:translateY(-1px); }
button.primary { background:linear-gradient(180deg,#a77a3e,#765126);border-color:#c29b60;color:white; }

.tabs { display:flex;gap:5px;margin-bottom:18px; }
.tab { padding:9px 15px;border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--muted); }
.tab.active { background:#1b1711;border-color:var(--gold);color:var(--gold2); }

.gear-layout { display:grid;grid-template-columns:1fr 1fr 280px;gap:15px; }
.gear-paper { background:#0d1015;border:1px solid var(--line);border-radius:10px;padding:15px; }
.gear-title { display:flex;justify-content:space-between;align-items:center; }
.gear-title h3 { margin:0; }

.equip-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px; }
.slot { min-height:85px;border:1px solid var(--line);background:#11141a;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.slot.filled { border-color:#806338;background:#19160f; }
.icon { font-size:27px;margin-bottom:4px; }

.level-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px;
    margin:12px 0 8px;
    border:1px solid #4a3c28;
    background:linear-gradient(180deg,#1b1711,#111218);
    border-radius:8px;
}
.level-card span { display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px; }
.level-card strong { display:block;margin-top:2px;color:var(--gold2);font:24px Georgia,serif; }

.xp-track { height:9px;background:#080a0e;border:1px solid #252a31;border-radius:99px;overflow:hidden;margin-bottom:12px; }
.xp-fill { width:0%;height:100%;background:linear-gradient(90deg,#87622e,#d1a34e);transition:width .35s ease; }

.row { display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #252a31;color:var(--muted); }
.row b { color:var(--text); }

.combatbox { margin-top:15px;padding:12px;background:#141820;border-radius:7px; }
.combatbox div { display:flex;justify-content:space-between;margin-top:7px;color:var(--muted); }

.inventory { display:grid;grid-template-columns:repeat(8,1fr);gap:7px; }
.invslot { min-height:75px;border:1px solid var(--line);background:#0d1015;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer; }
.invslot:hover { border-color:var(--gold); }
.invslot small { text-align:center;font-size:9px;color:var(--muted); }

.dev-tools {
    margin-top:15px;
    padding-top:12px;
    border-top:1px solid #252a31;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.dev-tools small { width:100%;color:#6f7580; }
.dev-tools button { font-size:10px;padding:6px 8px; }

.toast {
    display:none;position:fixed;left:50%;bottom:25px;transform:translateX(-50%);
    background:#171a20;border:1px solid var(--gold);padding:10px 18px;border-radius:7px;
    color:var(--gold2);box-shadow:0 10px 30px #0008;z-index:1000;
}

/* Level-up screen */

.modal-backdrop {
    display:none;
    position:fixed;
    inset:0;
    z-index:900;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(5px);
}

.modal-backdrop.active { display:flex; }

.level-modal {
    width:min(560px,100%);
    padding:28px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 0,rgba(190,148,75,.15),transparent 38%),
        linear-gradient(180deg,#191a1f,#0d0f13);
    border:1px solid #705735;
    border-radius:14px;
    box-shadow:0 30px 100px #000;
    animation:levelIn .28s ease-out;
}

@keyframes levelIn {
    from { opacity:0;transform:translateY(18px) scale(.97); }
    to { opacity:1;transform:none; }
}

.level-emblem {
    width:62px;
    height:62px;
    margin:0 auto 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--gold);
    border-radius:50%;
    color:var(--gold2);
    font-size:29px;
    background:#17130d;
    box-shadow:0 0 35px rgba(190,148,75,.16);
}

.eyebrow { color:var(--gold);font-size:10px;letter-spacing:3px;margin:0; }
.level-modal h2 { font-size:36px;margin:3px 0 5px; }
.level-message { color:var(--muted);margin:0 auto 18px; }

.level-info {
    display:flex;
    justify-content:center;
    gap:12px;
    align-items:center;
    margin-bottom:18px;
    color:var(--muted);
}
.level-info strong { color:var(--gold2);font:22px Georgia,serif; }

.stat-choices { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }

.stat-choice {
    padding:14px 8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#101218;
    cursor:pointer;
}
.stat-choice:hover {
    border-color:var(--gold);
    background:#1b1710;
    transform:translateY(-2px);
}
.stat-choice .stat-name { display:block;color:var(--text);font-weight:600; }
.stat-choice .stat-value { display:block;color:var(--gold2);font-size:20px;margin-top:4px; }
.stat-choice .stat-gain { display:block;color:#78966b;font-size:11px;margin-top:3px; }

.level-note { color:#707680;font-size:11px;margin:16px 0 0; }

@media(max-width:900px) {
    .creator { grid-template-columns:1fr; }
    .gear-layout { grid-template-columns:1fr; }
    .cards { grid-template-columns:1fr; }
}

@media(max-width:600px) {
    .formgrid { grid-template-columns:1fr; }
    .attributes { grid-template-columns:repeat(2,1fr); }
    .inventory { grid-template-columns:repeat(4,1fr); }
    .portrait { height:360px; }
    .stat-choices { grid-template-columns:repeat(2,1fr); }
}


/* Arena loot tables */

.drop-table {
    margin-top:15px;
    padding:15px;
    background:#0d1015;
    border:1px solid var(--line);
    border-radius:10px;
}

.drop-table h3 {
    margin:0 0 10px;
    font-size:18px;
}

.drop-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-top:1px solid #252a31;
}

.drop-row:first-of-type { border-top:0; }

.drop-row strong { display:block; }
.drop-row small { display:block;color:var(--muted);margin-top:2px; }
.drop-row b { color:var(--gold2);min-width:48px;text-align:right; }

.invslot.loot-common { border-color:#4a4e55; }
.invslot.loot-uncommon { border-color:#5f795f; }
.invslot.loot-rare { border-color:#5b7192; }
.invslot.loot-epic { border-color:#795b91; }
.invslot.loot-legendary {
    border-color:#a17a3c;
    box-shadow:inset 0 0 18px rgba(185,147,88,.07);
}

.loot-note {
    margin:-3px 0 12px;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.derived-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:12px 0;
}
.derived-stats > div {
    background:#0d1015;
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px;
}
.derived-stats span {
    display:block;
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.derived-stats strong {
    display:block;
    margin-top:4px;
    font-size:16px;
}

/* =========================
   ARENA
   ========================= */
.arena-screen{display:none;min-height:calc(100vh - 40px);padding:28px;max-width:1250px;margin:20px auto;background:radial-gradient(circle at 50% 30%,#292017 0,#111318 45%,#090b0f 100%);border:1px solid var(--line);box-shadow:0 25px 80px #000;border-radius:14px}
.arena-screen.active{display:block}
.arena-topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:20px}
.arena-topbar h2{font-size:38px;letter-spacing:.08em;margin:2px 0 6px}
.arena-topbar p{color:var(--muted);margin:0;max-width:650px}
.arena-player-card{min-width:210px;background:#0d1015;border:1px solid var(--line);padding:14px;border-radius:10px;display:grid;gap:6px}
.arena-player-card span,.arena-player-card small{color:var(--muted);font-size:12px}
.arena-xp{height:6px;background:#252a31;border-radius:10px;overflow:hidden}.arena-xp i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s}
.arena-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:20px}
.arena-stage{min-height:610px;border:1px solid #34312b;border-radius:12px;background:linear-gradient(#151517aa,#08090cdd),radial-gradient(circle at 50% 35%,#4a3721,#101116 58%);position:relative;overflow:hidden;display:flex;flex-direction:column}
.arena-stage:before{content:"";position:absolute;inset:auto 8% 5%;height:180px;border-radius:50%;background:#0008;box-shadow:0 0 80px #000 inset}
.arena-banner{position:relative;z-index:1;padding:14px 18px;border-bottom:1px solid #37332d;background:#0a0b0eaa;display:flex;justify-content:space-between}.arena-banner span{font-size:11px;letter-spacing:.15em;color:var(--gold)}.arena-banner b{font-size:12px;color:var(--muted)}
.enemy-stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}.enemy-stage .enemy-silhouette{font-size:120px;line-height:1;filter:drop-shadow(0 12px 20px #000);opacity:.85}.enemy-art{display:block;width:min(330px,70%);height:330px;object-fit:contain;filter:drop-shadow(0 18px 24px #000);image-rendering:auto}.enemy-stage h3{font-size:28px;margin:16px 0 4px}.enemy-stage p{color:var(--muted);margin:0}
.arena-actions{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;padding:20px;border-top:1px solid #34312b;background:#090a0dbb}.arena-actions button{min-width:150px}
.arena-roster{background:#0c0f14;border:1px solid var(--line);border-radius:12px;padding:14px}.roster-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.roster-title h3{margin:0}.roster-title span{font-size:10px;color:var(--muted);letter-spacing:.12em}
.arena-enemy{width:100%;text-align:left;border:1px solid #252a31;background:#11141a;border-radius:8px;padding:11px;margin:7px 0;color:var(--text);cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;transition:.15s}.arena-enemy:hover:not(.locked){border-color:#75603c;transform:translateX(2px)}.arena-enemy.selected{border-color:var(--gold);background:#19160f}.arena-enemy.locked{opacity:.38;cursor:not-allowed}.arena-enemy.defeated{opacity:.65}.arena-enemy .num{font-weight:bold;color:var(--gold)}.arena-enemy .enemy-info strong{display:block;font-size:13px}.arena-enemy .enemy-info small{color:var(--muted);font-size:10px}.arena-enemy .enemy-state{font-size:11px;color:var(--gold2)}
.arena-footer{display:flex;justify-content:space-between;margin-top:16px}
.combat-backdrop{position:fixed;inset:0;background:#050609dd;backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:100}.combat-backdrop.active{display:flex}.combat-panel{width:min(900px,94vw);background:#0d1015;border:1px solid #4b4437;border-radius:14px;box-shadow:0 30px 100px #000;padding:22px}.combat-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}.combat-head h2{margin:2px 0 0;font-size:28px}.combatants{display:grid;grid-template-columns:1fr 70px 1fr;gap:18px;align-items:center;padding:25px 0}.combatant{text-align:center}.combat-portrait{width:110px;height:110px;margin:auto;border-radius:50%;display:grid;place-items:center;font-size:52px;background:radial-gradient(circle,#2b2520,#090a0d 70%);border:1px solid #51483a;box-shadow:inset 0 0 30px #000;overflow:hidden}.combat-portrait.enemy{font-size:60px}.combat-portrait.has-art{background:#09090b;border-color:#6b5330;border-radius:12px}.combat-portrait.has-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.combatant h3{margin:10px 0 7px}.combat-vs{text-align:center;color:var(--gold);font-weight:bold;letter-spacing:.15em}.health-track{height:10px;background:#292d32;border-radius:10px;overflow:hidden;border:1px solid #3a3e44}.health-track i{display:block;height:100%;width:100%;background:#8b3430;transition:width .25s}.combatant small{color:var(--muted)}.combat-log{height:130px;overflow:auto;background:#080a0d;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;color:#b8bdc6;line-height:1.65}.combat-log div{border-bottom:1px solid #191d22;padding:2px 0}.combat-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}.combat-buttons button.danger{border-color:#63302c;color:#d9948d}
@media(max-width:850px){.arena-topbar,.arena-layout{grid-template-columns:1fr;display:grid}.arena-player-card{min-width:0}.arena-layout{grid-template-columns:1fr}.arena-roster{order:2}.arena-stage{min-height:520px}.combatants{grid-template-columns:1fr}.combat-vs{display:none}.combat-buttons{grid-template-columns:1fr 1fr}}

/* =========================
   ASHEN VALE JOURNEY HUB
   ========================= */
.journey-hub{
    display:none !important;
    visibility:hidden;
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:50;
    overflow:hidden;
    background:#05070a;
}
.journey-hub.active{display:block !important;visibility:visible;pointer-events:auto}
.journey-hub-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.journey-hub-shade{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.02) 42%,rgba(0,0,0,.20));
}
.hub-title{
    position:absolute;
    left:2.2%;
    top:2.4%;
    color:#f2dfb7;
    text-shadow:0 3px 12px #000,0 0 2px #000;
    pointer-events:none;
}
.hub-title-main{
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(28px,3.1vw,58px);
    letter-spacing:.12em;
    line-height:1;
}
.hub-title-sub{
    margin-top:10px;
    padding-left:18px;
    font:clamp(10px,1vw,17px) Georgia,"Times New Roman",serif;
    letter-spacing:.25em;
}
.hub-profile{
    position:absolute;
    right:2%;
    top:2.1%;
    min-width:min(31vw,510px);
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 18px;
    color:#f4ead5;
    background:linear-gradient(180deg,rgba(8,9,12,.92),rgba(13,11,10,.86));
    border:1px solid #a0783e;
    box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,220,150,.08);
    clip-path:polygon(0 0,97% 0,100% 18%,100% 82%,97% 100%,0 100%,2% 82%,2% 18%);
}
.hub-profile-avatar{
    width:60px;height:60px;border:1px solid #a88753;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle,#5b4a36,#17130f 68%);font-size:28px;flex:0 0 auto;
}
.hub-profile-info{display:grid;gap:3px;min-width:150px;flex:1}
.hub-profile-info strong{font:700 17px Georgia,serif}
.hub-profile-info span,.hub-profile-info small{font-size:11px;color:#c8bda9}
.hub-xp{height:6px;background:#342e25;border:1px solid #65543a;overflow:hidden;margin-top:2px}
.hub-xp i{display:block;height:100%;width:0;background:#c89a52;transition:width .25s}
.hub-resources{display:grid;gap:7px;font-size:13px;color:#e6c77f;white-space:nowrap}
.hub-location{
    position:absolute;
    z-index:3;
    border:1px solid #b78b48;
    color:#f7e7c2;
    background:linear-gradient(180deg,rgba(15,13,11,.96),rgba(6,7,9,.93));
    box-shadow:0 8px 25px rgba(0,0,0,.55),inset 0 0 18px rgba(177,130,57,.09);
    font-family:Georgia,"Times New Roman",serif;
    cursor:pointer;
    padding:10px 26px 9px;
    min-width:150px;
    transition:transform .18s,filter .18s,box-shadow .18s;
    clip-path:polygon(8% 0,92% 0,100% 22%,100% 78%,92% 100%,8% 100%,0 78%,0 22%);
}
.hub-location:hover{transform:translateY(-3px) scale(1.025);filter:brightness(1.18);box-shadow:0 12px 34px rgba(0,0,0,.65),0 0 24px rgba(202,158,82,.18)}
.hub-location strong{display:block;font-size:17px;letter-spacing:.08em}
.hub-location small{display:block;margin-top:4px;font-size:9px;letter-spacing:.08em;color:#c6b69a}
.hub-location-icon{display:block;font-size:21px;margin-bottom:1px;color:#e5b85e}
.hub-arena-button{
    left:50%;top:53%;transform:translate(-50%,-50%);min-width:225px;padding:14px 34px 13px;
    box-shadow:0 0 0 1px rgba(218,174,91,.18),0 12px 35px rgba(0,0,0,.65),0 0 28px rgba(196,142,57,.18);
}
.hub-arena-button:hover{transform:translate(-50%,-54%) scale(1.035)}
.hub-dungeons-button{left:16%;top:60%}
.hub-blacksmith-button{right:13%;top:29%}
.hub-market-button{right:14%;top:67%}
.hub-nav{
    position:absolute;z-index:4;left:1.3%;bottom:2.2%;display:flex;overflow:hidden;
    border:1px solid #9a733c;background:rgba(7,8,10,.92);box-shadow:0 10px 30px #0008;
}
.hub-nav button{min-width:105px;padding:12px 14px;background:transparent;border:0;border-right:1px solid #3d3428;color:#e7d7ba;cursor:pointer;font:12px Georgia,serif;letter-spacing:.04em}
.hub-nav button:last-child{border-right:0}
.hub-nav button:hover{background:#201a12;color:#fff0c9}
.hub-nav span{display:block;font-size:21px;margin-bottom:4px;color:#d2ad70}
.hub-quest{
    position:absolute;z-index:4;right:1.4%;bottom:2.2%;min-width:285px;padding:13px 22px;
    color:#e9dbc2;background:rgba(7,8,10,.93);border:1px solid #9a733c;box-shadow:0 10px 30px #0008;
    clip-path:polygon(3% 0,97% 0,100% 15%,100% 85%,97% 100%,3% 100%,0 85%,0 15%);
}
.hub-quest-label{display:block;font:10px Georgia,serif;letter-spacing:.16em;color:#d2b47c;margin-bottom:7px}
.hub-quest strong{font:14px Georgia,serif}
@media(max-width:900px){
    .hub-profile{min-width:0;right:2%;max-width:45vw}.hub-resources{display:none}
    .hub-location{transform:scale(.85)}
    .hub-arena-button{left:50%;top:52%;transform:translate(-50%,-50%) scale(.9)}
    .hub-arena-button:hover{transform:translate(-50%,-54%) scale(.93)}
    .hub-dungeons-button{left:8%;top:59%}.hub-blacksmith-button{right:5%;top:29%}.hub-market-button{right:5%;top:69%}
    .hub-nav button{min-width:72px;padding:9px 8px;font-size:10px}.hub-quest{min-width:210px;padding:10px 14px}
}
@media(max-width:620px){
    .journey-hub-bg{object-position:center}
    .hub-title{top:2%;left:3%}.hub-title-main{font-size:27px}.hub-title-sub{font-size:8px;padding-left:4px;margin-top:5px}
    .hub-profile{top:12%;right:3%;max-width:94vw;left:3%;padding:8px 12px}.hub-profile-avatar{width:45px;height:45px}
    .hub-location{min-width:120px;padding:8px 17px;transform:scale(.72)}
    .hub-arena-button{top:53%;left:50%;transform:translate(-50%,-50%) scale(.8)}
    .hub-arena-button:hover{transform:translate(-50%,-54%) scale(.83)}
    .hub-dungeons-button{left:0;top:58%}.hub-blacksmith-button{right:-1%;top:28%}.hub-market-button{right:-1%;top:68%}
    .hub-nav{left:2%;bottom:1.5%;right:2%;justify-content:space-between}.hub-nav button{flex:1;min-width:0;padding:8px 3px}
    .hub-quest{display:none}
}


/* Special attack UI */
.combat-turnbar{
    display:flex;justify-content:space-between;gap:12px;margin:12px 0 8px;
    color:#d8c39a;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.combat-turnbar span:last-child{color:#e5b85e}
.combat-buttons button.special-action{
    border-color:#b78b48;
    box-shadow:inset 0 0 18px rgba(205,155,62,.08),0 0 12px rgba(205,155,62,.08);
}
.combat-buttons button:disabled{
    opacity:.45;cursor:not-allowed;filter:grayscale(.35);
}
.special-select-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;
}
.special-select-row select{
    min-width:150px;padding:6px 8px;background:#0c0d10;color:#ead9b8;border:1px solid #66502f;
    font:12px Georgia,serif;
}
.invslot.special-slot{
    border-style:dashed;
}
.invslot.equipped-special{
    box-shadow:inset 0 0 0 1px #d3a24e,0 0 12px rgba(211,162,78,.16);
}

/* =========================
   HEALING POTIONS / MARKET
   ========================= */
.market-backdrop{position:fixed;inset:0;background:#050609dd;backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}.market-backdrop.active{display:flex}
.market-panel{width:min(760px,94vw);max-height:90vh;overflow:auto;background:#0d1015;border:1px solid #806133;border-radius:14px;box-shadow:0 30px 100px #000;padding:24px;color:var(--text)}
.market-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px}.market-head h2{margin:4px 0 5px;font-size:27px}.market-head p{margin:0;color:var(--muted);font-size:12px;max-width:480px}.market-gold{white-space:nowrap;color:#e6c77f;font-size:14px;padding:9px 12px;border:1px solid #57472e;background:#11100d;border-radius:7px}.market-note{margin:14px 0;padding:10px 12px;border:1px solid #3c352b;background:#111318;color:#bdb5a7;font-size:11px;border-radius:7px}.market-potions{display:grid;gap:10px}.market-item{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:13px;border:1px solid #2d3035;background:#11141a;border-radius:9px}.market-item:hover{border-color:#695331}.market-potion-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid #5c4b31;background:radial-gradient(circle,#30271b,#0b0d10 70%);border-radius:8px;font-size:27px}.market-potion-info{display:grid;gap:3px}.market-potion-info strong{font-family:Georgia,serif;font-size:15px}.market-potion-info small{color:var(--muted);font-size:11px;line-height:1.4}.market-potion-info span{font-size:10px;color:#c6ad82}.market-item button{min-width:105px}.market-item button:disabled{opacity:.4;cursor:not-allowed}.market-footer{display:flex;justify-content:space-between;align-items:center;margin-top:15px;color:var(--muted);font-size:10px}.market-footer button{padding:9px 13px}
.potion-slot{border-color:#685536}.potion-slot .icon{font-size:25px}.combat-buttons{grid-template-columns:repeat(5,1fr)}.combat-buttons button.potion-action{border-color:#6c5634;box-shadow:inset 0 0 18px rgba(185,143,72,.07)}.potion-combat-status{text-align:center;margin-top:8px;color:#8f969f;font-size:10px;letter-spacing:.04em}.potion-combat-status b,.potion-combat-status span{color:#d6bb85}
@media(max-width:850px){.combat-buttons{grid-template-columns:1fr 1fr}.market-head{flex-direction:column}.market-gold{align-self:flex-start}}
@media(max-width:520px){.market-item{grid-template-columns:45px 1fr}.market-item button{grid-column:2;justify-self:start}.market-potion-icon{width:42px;height:42px}.market-footer{gap:10px;flex-direction:column;align-items:flex-start}}


/* =========================
   SPELL SCROLLS
   ========================= */
.spell-slot{border-color:#596b88;cursor:pointer}
.spell-slot .icon{filter:drop-shadow(0 0 6px rgba(150,190,255,.28))}
.equipped-spell{box-shadow:0 0 0 1px #b99358, 0 0 14px rgba(185,147,88,.18)}
.spell-action{border-color:#596b88;background:linear-gradient(180deg,#202b3b,#121923);color:#dbe8ff}
.spell-action:disabled{opacity:.45}
.spell-combat-status{margin-top:8px;text-align:center;color:#9aa8bc;font-size:12px}
#spellSelect{min-width:210px}

/* =========================
   DUNGEONS
   ========================= */
.dungeon-screen{display:none;min-height:calc(100vh - 40px);padding:28px;max-width:1250px;margin:20px auto;background:radial-gradient(circle at 50% 25%,#241d1b 0,#111318 45%,#090b0f 100%);border:1px solid #514637;box-shadow:0 25px 80px #000;border-radius:14px}
.dungeon-screen.active{display:block}
.dungeon-topbar{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px}
.dungeon-topbar h2{margin:3px 0 5px;font-size:30px}
.dungeon-topbar p:not(.eyebrow){margin:0;color:var(--muted);font-size:12px;max-width:720px}
.dungeon-player-card{display:grid;grid-template-columns:auto auto auto;gap:10px;align-items:center;padding:11px 14px;background:#0d1015;border:1px solid #5d4b31;white-space:nowrap;color:#e4d3b3}
.dungeon-player-card strong{font:17px Georgia,serif;color:#f2e4c9}
.dungeon-player-card span{font-size:11px;color:#b9ad9c}
.dungeon-content{padding-top:20px}
.dungeon-select-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.dungeon-card{background:linear-gradient(180deg,#17171a,#0e1014);border:1px solid #3a3c42;border-radius:10px;padding:17px;position:relative;overflow:hidden}
.dungeon-card.locked{opacity:.52}
.dungeon-card.cleared{border-color:#75603b}
.dungeon-card h3{margin:0 0 4px;font-size:21px}
.dungeon-card p{margin:4px 0;color:var(--muted);font-size:11px}
.dungeon-meta{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0}
.dungeon-chip{font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border:1px solid #484039;border-radius:99px;color:#cbbd9f}
.dungeon-card button{margin-top:8px}
.dungeon-run-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:14px}
.dungeon-progress{display:flex;gap:5px;align-items:center;flex:1}
.dungeon-progress i{height:7px;flex:1;background:#24272d;border:1px solid #35383e}
.dungeon-progress i.done{background:#9b753c;border-color:#b58d50}
.dungeon-progress i.current{box-shadow:0 0 10px rgba(203,158,77,.25);border-color:#c29a5c}
.dungeon-hp{font:12px Georgia,serif;color:#d8c39a;white-space:nowrap}
.dungeon-room{background:#0d1015;border:1px solid #403b33;border-radius:12px;padding:24px;min-height:350px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.dungeon-room .room-icon{font-size:48px;margin-bottom:7px}
.dungeon-room h3{font-size:28px;margin:0 0 5px}
.dungeon-room p{color:var(--muted);font-size:12px;max-width:720px;margin:0 auto 18px}
.dungeon-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:820px;width:100%;margin:0 auto}
.dungeon-options button{text-align:left;padding:15px;background:#12151a;border:1px solid #383b40;color:#e6dccb;cursor:pointer;border-radius:8px}
.dungeon-options button:hover{border-color:#86683d;background:#18150f}
.dungeon-options button strong{display:block;font:16px Georgia,serif;color:#e9d5ad;margin-bottom:3px}
.dungeon-options button small{color:#9299a2;font-size:10px}
.dungeon-room-note{margin-top:15px!important;font-size:10px!important;color:#8e877c!important}
.dungeon-loot{margin-top:14px;padding:11px;background:#12130f;border:1px solid #54472f;color:#d6bd88;font-size:11px}
.dungeon-masteries{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}
.dungeon-mastery{padding:10px;border:1px solid #34373c;background:#111318;border-radius:7px;font-size:10px;color:#9299a2}
.dungeon-mastery.complete{border-color:#81673d;color:#dbc08a}
.dungeon-route{font-size:10px;color:#8f969f;margin-bottom:10px}
.dungeon-route b{color:#d8c39a}
@media(max-width:850px){.dungeon-select-grid{grid-template-columns:1fr}.dungeon-topbar{flex-direction:column}.dungeon-player-card{align-self:stretch;grid-template-columns:1fr 1fr 1fr}.dungeon-options{grid-template-columns:1fr}.dungeon-room{min-height:300px}}
@media(max-width:520px){.dungeon-screen{padding:17px;margin:8px}.dungeon-topbar h2{font-size:24px}.dungeon-masteries{grid-template-columns:1fr}.dungeon-player-card{font-size:10px}}


/* =========================
   ASHEN EQUIPMENT WORKBENCH
   ========================= */
.equipment-workbench{display:grid;grid-template-columns:minmax(500px,1.35fr) minmax(300px,.65fr);gap:16px;align-items:start}
.equipment-doll-panel,.equipment-stats-panel{background:linear-gradient(180deg,#11130f,#0b0d0d);border-color:#504936;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.gear-title small{display:block;color:#858a87;font-size:10px;margin-top:4px}
.ashen-equipment-doll{position:relative;min-height:510px;margin-top:16px;border:1px solid #37382f;border-radius:10px;background:radial-gradient(circle at 50% 44%,rgba(128,99,56,.13),transparent 29%),linear-gradient(180deg,#15160f,#0b0d0c);overflow:hidden}
.ashen-equipment-doll:before{content:"";position:absolute;inset:35px 60px;background:linear-gradient(90deg,transparent 49.5%,rgba(116,101,72,.18) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,rgba(116,101,72,.12) 50%,transparent 50.5%);pointer-events:none}
.doll-core{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:145px;height:190px;border:1px solid #4b4638;border-radius:45% 45% 25% 25%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,#252318,#11130f 68%);color:#c8b47d;box-shadow:0 0 35px rgba(128,99,56,.12)}
.doll-rune{font-size:48px;opacity:.42;line-height:1}.doll-core span{font-family:Georgia,serif;font-weight:bold;margin-top:8px}.doll-core small{max-width:120px;color:#777d78;font-size:9px;margin-top:5px}
.doll-slot{position:absolute;width:118px;min-height:76px;border:1px solid #555344;border-radius:7px;background:linear-gradient(#28281f,#171812);color:#c6c4b8;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.25)}
.doll-slot:hover{border-color:#a1844e;transform:translateY(-1px)}.doll-slot.filled{border-color:#987642;background:linear-gradient(#302a1c,#19160f);box-shadow:inset 0 0 18px rgba(171,126,60,.10),0 0 12px rgba(171,126,60,.08)}
.gear-slot-icon{font-size:25px}.gear-slot-name{font-size:9px;max-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-head{left:50%;top:18px;transform:translateX(-50%)}.slot-head:hover{transform:translateX(-50%) translateY(-1px)}
.slot-cape{left:18px;top:112px}.slot-neck{left:50%;top:112px;transform:translateX(-50%)}.slot-neck:hover{transform:translateX(-50%) translateY(-1px)}
.slot-weapon{left:18px;top:214px}.slot-body{left:50%;top:214px;transform:translateX(-50%)}.slot-body:hover{transform:translateX(-50%) translateY(-1px)}
.slot-offhand{right:18px;top:214px}.slot-hands{right:18px;top:316px}.slot-legs{left:50%;bottom:104px;transform:translateX(-50%)}.slot-legs:hover{transform:translateX(-50%) translateY(-1px)}
.slot-feet{left:50%;bottom:18px;transform:translateX(-50%)}.slot-feet:hover{transform:translateX(-50%) translateY(-1px)}
.slot-ring{left:18px;bottom:18px}.slot-waist{right:18px;bottom:18px}
.equipment-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.equipment-stat-grid>div,.equipment-derived>div{border:1px solid #30342f;background:#0c0f0d;border-radius:6px;padding:10px;display:flex;justify-content:space-between;gap:10px}.equipment-stat-grid span,.equipment-derived span{font-size:10px;color:#8f958f}.equipment-stat-grid b{color:#d1b777}.stat-total-title{margin-top:18px;padding-top:14px;border-top:1px solid #292c28}.equipment-stat-grid.totals b{color:#d8d8cf}.equipment-derived{display:grid;gap:7px;margin-top:16px}.equipment-derived strong{color:#c8b47d}
.gear-inventory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gear-inventory-card{min-height:82px;border:1px solid #393d38;background:#0d100e;border-radius:7px;padding:9px;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}
.gear-inventory-card:hover{border-color:#665b42}.gear-inventory-card.inventory-equipped{border-color:#9b7942;box-shadow:inset 0 0 18px rgba(160,120,55,.09)}
.gear-item-icon{width:42px;height:42px;border:1px solid #373a34;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#151813}
.gear-item-info{min-width:0;display:flex;flex-direction:column;gap:3px}.gear-item-info strong{font-size:12px;color:#d2d0c5}.gear-item-info small{font-size:9px;color:#8d938d}.gear-item-info em{font-size:9px;color:#b9a36f;font-style:normal}.gear-req-warning{font-size:8px;color:#b76e62}
.gear-item-actions{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.gear-item-actions button{min-width:64px;padding:7px 9px;font-size:9px}.gear-item-actions button:disabled{opacity:.35;cursor:not-allowed}.owned-count{font-size:10px;color:#aaa58f}
.utility-card{opacity:.88}
@media(max-width:900px){.equipment-workbench{grid-template-columns:1fr}.gear-inventory-list{grid-template-columns:1fr}}
@media(max-width:600px){.ashen-equipment-doll{min-height:620px}.doll-slot{width:96px}.slot-cape,.slot-weapon,.slot-ring{left:8px}.slot-offhand,.slot-hands,.slot-waist{right:8px}}


/* =========================================================
   FINAL EQUIPMENT PAGE — ASHEN VALE SLOT INVENTORY LAYOUT
   ========================================================= */
#screen5{max-width:1220px}
.equipment-page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:18px 0}
.equipment-page-head h2{font-family:Georgia,serif;font-size:30px;color:#e4d7b5;margin:0 0 5px}
.equipment-page-head p{margin:0;color:#8e9698;font-size:12px}
.equipment-level-pill{white-space:nowrap;border:1px solid #424942;border-radius:999px;padding:8px 12px;color:#d8cfb4;background:#0d100f;font-size:11px}

.equipment-main-grid{display:grid;grid-template-columns:minmax(570px,1fr) minmax(285px,340px);gap:16px;align-items:stretch}
.equipment-wheel-card,.equipment-stats-card,.slot-inventory-card{border:1px solid #514b38;border-radius:8px;background:linear-gradient(180deg,#10130f,#090c0a);box-shadow:inset 0 0 35px rgba(0,0,0,.36)}
.equipment-wheel-card{padding:14px}
.equipment-help{margin:0 0 8px;color:#7f888a;font-size:10px}

.ashen-equipment-wheel{position:relative;min-height:590px;overflow:hidden;border:1px solid #2f342d;border-radius:7px;background:radial-gradient(circle at 50% 48%,rgba(130,102,56,.09),transparent 34%),#0b0e0b}
.equipment-rune-ring{position:absolute;width:460px;height:460px;left:50%;top:52%;transform:translate(-50%,-50%);border:2px solid rgba(131,103,56,.28);border-radius:50%;box-shadow:0 0 0 10px rgba(131,103,56,.035),inset 0 0 0 1px rgba(131,103,56,.18)}
.equipment-rune-ring:before,.equipment-rune-ring:after{content:"";position:absolute;background:rgba(131,103,56,.22)}
.equipment-rune-ring:before{width:2px;height:530px;left:50%;top:50%;transform:translate(-50%,-50%)}
.equipment-rune-ring:after{height:2px;width:530px;left:50%;top:50%;transform:translate(-50%,-50%)}

#screen5 .doll-slot{position:absolute;width:132px;min-height:92px;border:1px solid #5b5542;border-radius:7px;background:linear-gradient(#23241c,#141710);color:#d7d1bd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;z-index:2;transition:.16s ease;box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 5px 14px rgba(0,0,0,.28)}
#screen5 .doll-slot:hover,#screen5 .doll-slot.selected-slot{border-color:#b08a4f;box-shadow:inset 0 0 16px rgba(176,138,79,.08),0 0 12px rgba(176,138,79,.08)}
#screen5 .doll-slot.filled{background:linear-gradient(#2c281b,#17160f);border-color:#957441}
#screen5 .gear-slot-icon{font-size:31px;line-height:1}
#screen5 .gear-slot-name{font-family:Georgia,serif;font-size:11px;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#screen5 .slot-head{left:50%;top:18px;transform:translateX(-50%)}
#screen5 .slot-cape{left:26px;top:178px}
#screen5 .slot-neck{left:50%;top:136px;transform:translateX(-50%)}
#screen5 .slot-offhand{right:26px;top:178px}
#screen5 .slot-weapon{left:26px;top:304px}
#screen5 .slot-body{left:50%;top:280px;transform:translateX(-50%)}
#screen5 .slot-hands{right:26px;top:304px}
#screen5 .slot-ring{left:26px;bottom:28px}
#screen5 .slot-legs{left:50%;bottom:28px;transform:translateX(-50%)}
#screen5 .slot-feet{right:26px;bottom:28px}
#screen5 .slot-head:hover{transform:translateX(-50%) translateY(-1px)}
#screen5 .slot-neck:hover,#screen5 .slot-body:hover,#screen5 .slot-legs:hover{transform:translateX(-50%) translateY(-1px)}

.equipment-stats-card{padding:18px 20px}
.equipment-stats-card>h3{margin:0 0 14px;font-family:Georgia,serif;font-size:23px;color:#e0d1ab}
.stat-section{border-top:1px solid #3a3a30;padding:12px 0 8px}
.stat-section h4{margin:0 0 8px;font-family:Georgia,serif;font-size:15px;color:#c9ab6c}
.stat-line{display:flex;justify-content:space-between;gap:20px;padding:3px 0;color:#aab1b0;font-size:12px}
.stat-line b{color:#e5e0d1;font-weight:600}
.derived-clean{padding-bottom:2px}
.compact-combatbox{margin-top:14px}
.compact-combatbox>div,.compact-combatbox label{font-size:10px}

.slot-inventory-card{margin-top:16px;padding:16px 18px}
.slot-inventory-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;border-bottom:1px solid #3a3a30;padding-bottom:12px}
.slot-inventory-head h3{font-family:Georgia,serif;color:#dfd1ae;font-size:22px;margin:0 0 4px}
.slot-inventory-head p{margin:0;color:#849092;font-size:11px}
.slot-picker{display:grid;grid-template-columns:auto minmax(120px,190px) auto;align-items:center;gap:8px;border:1px solid #5b5542;border-radius:7px;background:#0c0f0d;padding:7px 9px}
.slot-picker>span{font-size:20px}
.slot-picker select{background:#111510;border:0;color:#ddd5bf;padding:7px 8px;outline:none;font-family:Georgia,serif}
.slot-picker small{color:#7f8887;font-size:9px;white-space:nowrap}

.slot-inventory-list{display:grid;gap:8px;margin-top:12px;max-height:350px;overflow:auto;padding-right:4px}
.slot-item-row{display:grid;grid-template-columns:52px minmax(0,1fr) 70px 76px;gap:11px;align-items:center;border:1px solid #30352f;border-radius:7px;background:#0c0f0d;padding:9px 10px}
.slot-item-row:hover{border-color:#5c5541}
.slot-item-row.equipped-row{border-color:#917142;background:linear-gradient(90deg,rgba(145,113,66,.09),#0c0f0d 45%)}
.slot-item-icon{width:48px;height:48px;border:1px solid #3b4038;border-radius:6px;background:#151912;display:flex;align-items:center;justify-content:center;font-size:26px}
.slot-item-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.slot-item-copy strong{font-family:Georgia,serif;color:#ddd5c1;font-size:13px}
.slot-item-copy small{color:#848e8d;font-size:9px}
.slot-item-copy span{color:#b9a36f;font-size:9px}
.slot-item-copy em{color:#b87568;font-size:8px;font-style:normal}
.slot-item-state{text-align:right;color:#868e89;font-size:9px}
.slot-item-row button{padding:8px 10px;border-radius:5px;font-size:9px}
.slot-item-row button:disabled{opacity:.35;cursor:not-allowed}
.slot-unequip-btn{border-color:#735a45!important;color:#d0b495!important}
.slot-inventory-empty{min-height:130px;border:1px dashed #353a34;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7f8884;gap:5px}
.slot-inventory-empty>div{font-size:30px}
.slot-inventory-empty strong{font-family:Georgia,serif;color:#bcb5a3}
.slot-inventory-empty span{font-size:9px}

@media(max-width:980px){
    .equipment-main-grid{grid-template-columns:1fr}
    .equipment-stats-card{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}
    .equipment-stats-card>h3,.compact-combatbox{grid-column:1/-1}
}
@media(max-width:720px){
    .equipment-page-head,.slot-inventory-head{align-items:stretch;flex-direction:column}
    .equipment-main-grid{display:block}
    .equipment-stats-card{margin-top:14px;display:block}
    .ashen-equipment-wheel{min-height:650px}
    #screen5 .doll-slot{width:104px;min-height:82px}
    #screen5 .slot-cape,#screen5 .slot-weapon,#screen5 .slot-ring{left:8px}
    #screen5 .slot-offhand,#screen5 .slot-hands,#screen5 .slot-feet{right:8px}
    .slot-item-row{grid-template-columns:46px minmax(0,1fr) 70px}
    .slot-item-state{display:none}
}


/* =========================
   CHARACTER SELECT MENU — FIXED
   ========================= */
button.hub-profile-avatar.hub-character-switcher{
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    color:inherit;
    padding:0;
    cursor:pointer;
    background:rgba(10,12,10,.72);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
button.hub-profile-avatar.hub-character-switcher:hover{
    transform:scale(1.05);
    border-color:#c19650;
    box-shadow:0 0 20px rgba(193,150,80,.22);
}
button.hub-profile-avatar.hub-character-switcher:active{transform:scale(.97)}

.character-menu-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,4,3,.80);
    backdrop-filter:blur(4px);
}
.character-menu-overlay.active{display:flex}
.character-menu-panel{
    position:relative;
    width:min(620px,94vw);
    max-height:82vh;
    overflow:auto;
    padding:22px;
    border:1px solid #67583e;
    border-radius:10px;
    background:linear-gradient(180deg,#131610,#090c0a);
    box-shadow:0 25px 80px rgba(0,0,0,.68),inset 0 0 40px rgba(151,112,56,.04);
}
.character-menu-close{
    position:absolute;
    top:10px;
    right:12px;
    width:34px;
    height:34px;
    padding:0;
    border-radius:50%;
    font-size:20px;
    color:#cec2a7;
    background:#0b0e0c;
    border:1px solid #3f463d;
}
.character-menu-heading{
    display:flex;
    align-items:center;
    gap:13px;
    padding-right:42px;
    margin-bottom:17px;
}
.character-menu-rune{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid #9b7a45;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e4c779;
    font-size:21px;
    background:radial-gradient(circle,#2a2418,#11140f 70%);
}
.character-menu-heading h3{
    margin:0 0 3px;
    font-family:Georgia,serif;
    font-size:24px;
    color:#ead9ae;
}
.character-menu-heading p{
    margin:0;
    color:#8e9794;
    font-size:10px;
}
.character-slot-list{display:grid;gap:8px}
.character-slot-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    padding:11px;
    border:1px solid #303630;
    border-radius:7px;
    background:#0d100e;
}
.character-slot-card.active-character{
    border-color:#967342;
    background:linear-gradient(90deg,rgba(150,115,66,.10),#0d100e 48%);
}
.character-slot-mark{
    width:40px;
    height:40px;
    border:1px solid #3e443d;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c7aa6f;
    background:#151812;
}
.character-slot-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.character-slot-copy strong{
    font-family:Georgia,serif;
    color:#ddd4bd;
    font-size:14px;
}
.character-slot-copy span{color:#89918e;font-size:9px}
.character-slot-actions button{padding:7px 13px;font-size:9px}
.current-character-label{
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#c4a66b;
    border:1px solid #5c4c34;
    border-radius:999px;
    padding:5px 8px;
}
.character-slot-empty{
    padding:20px;
    text-align:center;
    border:1px dashed #353b34;
    border-radius:7px;
    color:#7f8783;
    font-size:10px;
}
.character-create-button{
    width:100%;
    margin-top:12px;
    padding:13px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    border:1px solid #765f3d;
    border-radius:7px;
    background:linear-gradient(90deg,#1d1a12,#11140f);
}
.character-create-button>span{font-size:24px;color:#d4b56e}
.character-create-button div{display:flex;flex-direction:column;gap:3px}
.character-create-button strong{font-family:Georgia,serif;color:#e0d3b4}
.character-create-button small{font-size:8px;color:#8e9691}
.character-create-button:hover{
    border-color:#b08a4e;
    background:linear-gradient(90deg,#282016,#141710);
}


/* Character menu actions */
.character-slot-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
}
.character-play-button{
    border-color:#6f633e!important;
}
.character-delete-button{
    color:#c88f82!important;
    border-color:#6a3f39!important;
    background:linear-gradient(#211311,#130d0c)!important;
}
.character-delete-button:hover{
    color:#f0b2a5!important;
    border-color:#a4584d!important;
    background:linear-gradient(#301714,#180e0d)!important;
}
@media(max-width:560px){
    .character-slot-card{
        grid-template-columns:40px minmax(0,1fr);
    }
    .character-slot-actions{
        grid-column:1/-1;
        justify-content:flex-end;
    }
}


/* =========================
   VICTORY REWARD POPUP
   ========================= */
.victory-overlay{
    position:fixed;
    inset:0;
    z-index:9500;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,4,3,.76);
    backdrop-filter:blur(4px);
}
.victory-overlay.active{display:flex}
.victory-card{
    width:min(520px,94vw);
    max-height:82vh;
    overflow:auto;
    padding:25px;
    text-align:center;
    border:1px solid #8d7041;
    border-radius:11px;
    background:
        radial-gradient(circle at 50% 0%,rgba(184,143,67,.12),transparent 35%),
        linear-gradient(180deg,#15170f,#090c0a);
    box-shadow:0 25px 80px rgba(0,0,0,.7),inset 0 0 45px rgba(170,127,58,.05);
}
.victory-emblem{
    width:58px;
    height:58px;
    margin:0 auto 8px;
    border:1px solid #a37b3f;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e9ca78;
    font-size:27px;
    background:radial-gradient(circle,#302718,#13150f 70%);
    box-shadow:0 0 24px rgba(181,137,61,.14);
}
.victory-eyebrow{
    margin:0;
    font-size:9px;
    letter-spacing:.22em;
    color:#aa8d57;
}
.victory-card h2{
    margin:6px 0 18px;
    font-family:Georgia,serif;
    color:#ead9ae;
    font-size:28px;
}
.victory-reward-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:16px;
}
.victory-reward-summary>div{
    border:1px solid #3c4037;
    border-radius:7px;
    background:#0c0f0d;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.victory-reward-summary small{
    color:#858d88;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.victory-reward-summary strong{
    color:#d8bd78;
    font-family:Georgia,serif;
    font-size:16px;
}
.victory-loot-block{
    text-align:left;
    border-top:1px solid #3b3c31;
    padding-top:14px;
}
.victory-loot-block h3{
    margin:0 0 9px;
    font-family:Georgia,serif;
    color:#cbb481;
    font-size:15px;
}
.victory-loot-list{
    display:grid;
    gap:7px;
    max-height:260px;
    overflow:auto;
}
.victory-loot-item{
    display:grid;
    grid-template-columns:38px 1fr;
    gap:9px;
    align-items:center;
    border:1px solid #30352e;
    border-radius:6px;
    background:#0d100e;
    padding:8px 9px;
}
.victory-loot-item>span{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #3a4038;
    border-radius:5px;
    background:#151912;
    font-size:19px;
}
.victory-loot-item div{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.victory-loot-item strong{
    color:#d8d0ba;
    font-size:11px;
}
.victory-loot-item small{
    color:#918b76;
    font-size:8px;
}
.victory-no-loot{
    padding:18px;
    border:1px dashed #383c35;
    border-radius:6px;
    text-align:center;
    color:#808782;
    font-size:10px;
}
.victory-continue{
    width:100%;
    margin-top:17px;
}


/* Critical victory overlay visibility fix */
.victory-overlay{
    z-index:20000!important;
}
.victory-overlay.active{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
}


/* Level-up stat popup: five attributes */
.level-modal .stat-choices{
    grid-template-columns:repeat(5,minmax(0,1fr));
}
@media(max-width:720px){
    .level-modal .stat-choices{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================
   MERGED STARTING CLASS CARDS
   ========================= */
#classes.cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
#classes .class-choice-card{
    min-height:245px;
    display:flex;
    flex-direction:column;
}
#classes .class-stats{
    margin:8px 0 5px;
    color:#d0b77b;
    font-size:10px;
    line-height:1.6;
    letter-spacing:.035em;
}
#classes .class-gear{
    margin:5px 0;
    color:#b9b5a7;
    font-size:10px;
    line-height:1.5;
}
#classes .class-ability{
    margin:5px 0 12px;
    padding:8px 9px;
    border-left:2px solid #896b37;
    background:rgba(142,108,55,.08);
    color:#aeb5af;
    font-size:9px;
    line-height:1.5;
}
#classes .class-choice-card > div:last-child{
    margin-top:auto;
}
@media(max-width:900px){
    #classes.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
    #classes.cards{grid-template-columns:1fr}
}


/* =========================
   SIMPLIFIED CHARACTER IDENTITY
   ========================= */
.creator-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.identity-heading{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.identity-creator{
    max-width:980px;
    margin:24px auto 0;
}

.portrait-selection{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.portrait-option{
    position:relative;
    padding:0;
    overflow:hidden;
    aspect-ratio:1 / 1.03;
    border:1px solid #40392d;
    background:#090909;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(0,0,0,.28);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.portrait-option img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.portrait-option:hover{
    transform:translateY(-2px);
    border-color:#806a42;
}

.portrait-option.selected{
    border-color:#c49b4f;
    box-shadow:
        0 0 0 2px rgba(196,155,79,.18),
        0 14px 30px rgba(0,0,0,.42),
        inset 0 0 28px rgba(183,132,55,.12);
}

.portrait-option.selected::after{
    content:"SELECTED";
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    padding:5px 9px;
    border:1px solid rgba(205,168,93,.55);
    background:rgba(10,9,7,.86);
    color:#d7b66d;
    font-size:8px;
    letter-spacing:.16em;
}

.identity-name-panel{
    max-width:560px;
    margin:26px auto 0;
    text-align:center;
}

.identity-name-panel .eyebrow{
    display:block;
    margin-bottom:9px;
}

.identity-name-field{
    display:block;
}

.identity-name-field input{
    width:100%;
    box-sizing:border-box;
    padding:16px 18px;
    border:1px solid #514735;
    background:rgba(8,8,8,.82);
    color:#eee7d7;
    text-align:center;
    font-family:inherit;
    font-size:20px;
    letter-spacing:.06em;
    outline:none;
}

.identity-name-field input:focus{
    border-color:#b88b45;
    box-shadow:0 0 0 2px rgba(184,139,69,.12);
}

.identity-name-panel p{
    margin:11px auto 0;
    max-width:480px;
    color:#858177;
    font-size:10px;
    line-height:1.6;
}

.identity-actions{
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
}

.portrait-avatar{
    overflow:hidden;
    padding:0;
}

.portrait-avatar img,
.chosen-player-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.chosen-player-portrait{
    overflow:hidden;
    padding:0;
}

.portrait-slot-mark{
    overflow:hidden;
    padding:0 !important;
}

.portrait-slot-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:760px){
    .portrait-selection{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
}

@media(max-width:480px){
    .portrait-selection{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }
    .identity-name-field input{
        font-size:17px;
    }
}


/* =========================
   CREATOR PAGE CLEANUP
   ========================= */

/* Creation screens only show their intended creation content.
   This also prevents any legacy stats/equipment blocks from appearing below them. */
#screen1 > :not(.heading):not(#origins):not(.buttons),
#screen2 > :not(.heading):not(#classes):not(.buttons),
#screen3 > :not(.heading):not(.identity-creator):not(.identity-actions){
    display:none !important;
}

/* Identity finishes with one prominent central action. */
.identity-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:34px auto 8px;
    width:100%;
}

.identity-actions .identity-begin-button{
    min-width:280px;
    padding:17px 42px;
    font-size:17px;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
}

@media(max-width:600px){
    .identity-actions .identity-begin-button{
        width:min(100%,340px);
        min-width:0;
        padding:16px 24px;
    }
}


/* =========================
   THE FALLEN KNIGHT INTRO CUTSCENE
   ========================= */
body.intro-open{overflow:hidden}

.intro-cutscene{
    position:fixed;
    inset:0;
    z-index:50000;
    display:none;
    background:#020305;
    opacity:0;
    transition:opacity .45s ease;
}
.intro-cutscene.active{display:block;opacity:1}
.intro-cutscene.closing{opacity:0}

.intro-scene{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#050609;
    color:#f0e7d6;
}

.intro-scene>img{
    position:absolute;
    inset:-3%;
    width:106%;
    height:106%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transform:scale(1.06);
    transition:opacity .8s ease,transform 9s ease;
    filter:saturate(.82) contrast(1.05) brightness(.78);
}
.intro-scene>img.intro-image-ready{
    opacity:1;
    transform:scale(1.01);
}

.intro-vignette{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.67) 28%,rgba(0,0,0,.16) 58%,rgba(0,0,0,.28) 100%),
      linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.04) 55%,rgba(0,0,0,.78));
    box-shadow:inset 0 0 160px rgba(0,0,0,.72);
}

.intro-skip{
    position:absolute;
    z-index:4;
    top:24px;
    right:28px;
    padding:9px 14px;
    border:1px solid rgba(213,185,133,.42);
    background:rgba(7,7,9,.48);
    color:#d8cab3;
    font:12px Georgia,"Times New Roman",serif;
    letter-spacing:.12em;
    text-transform:uppercase;
    backdrop-filter:blur(5px);
}

.intro-copy{
    position:absolute;
    z-index:3;
    left:5vw;
    top:50%;
    transform:translateY(-53%);
    width:min(520px,42vw);
    text-shadow:0 3px 14px #000;
}
.intro-kicker{
    font:12px Georgia,"Times New Roman",serif;
    color:#c69a5d;
    letter-spacing:.28em;
    text-transform:uppercase;
    margin-bottom:15px;
}
.intro-copy h1{
    margin:0 0 18px;
    font:700 clamp(34px,4.3vw,72px)/.95 Georgia,"Times New Roman",serif;
    color:#f5ead6;
    letter-spacing:.015em;
}
.intro-copy h1:after{
    content:"";
    display:block;
    width:92px;
    height:1px;
    margin-top:20px;
    background:linear-gradient(90deg,#c79b5d,transparent);
}
.intro-copy p{
    margin:0;
    max-width:500px;
    font:clamp(16px,1.45vw,22px)/1.55 Georgia,"Times New Roman",serif;
    color:#ded3c1;
}

.intro-controls{
    position:absolute;
    z-index:4;
    left:5vw;
    right:5vw;
    bottom:34px;
    display:grid;
    grid-template-columns:170px 1fr 170px;
    align-items:end;
    gap:20px;
}
.intro-controls>button{
    min-height:52px;
    font:12px Georgia,"Times New Roman",serif;
    letter-spacing:.13em;
    text-transform:uppercase;
    background:rgba(8,8,10,.66);
    border-color:#7b6546;
}
.intro-controls>button.primary{
    background:linear-gradient(180deg,rgba(151,99,43,.94),rgba(91,58,28,.96));
    border-color:#c99e61;
}
.intro-controls>button:disabled{opacity:.25;cursor:default;transform:none}

.intro-progress{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
}
.intro-dots{display:flex;gap:10px;align-items:center}
.intro-dot{
    width:9px;
    height:9px;
    min-width:0;
    padding:0;
    border-radius:50%;
    border:1px solid #8f8779;
    background:#8f8779;
    opacity:.55;
}
.intro-dot.active{
    width:13px;
    height:13px;
    opacity:1;
    border-color:#e0b16c;
    background:#b93029;
    box-shadow:0 0 0 3px rgba(225,178,108,.18),0 0 16px rgba(193,52,42,.65);
}
.intro-count{
    font:13px Georgia,"Times New Roman",serif;
    color:#d6c9b3;
    letter-spacing:.18em;
}

@media(max-width:760px){
    .intro-vignette{
        background:
          linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.25) 35%,rgba(0,0,0,.88) 73%),
          linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.12));
    }
    .intro-copy{
        left:7vw;
        right:7vw;
        top:auto;
        bottom:145px;
        width:auto;
        transform:none;
    }
    .intro-copy h1{font-size:clamp(34px,10vw,54px)}
    .intro-copy p{font-size:16px;line-height:1.45}
    .intro-controls{
        left:5vw;right:5vw;bottom:20px;
        grid-template-columns:1fr auto 1fr;
        gap:10px;
    }
    .intro-controls>button{min-width:0;padding:10px 12px}
    .intro-skip{top:14px;right:14px}
}


/* =========================
   THE FALLEN KNIGHT MAIN MENU
   ========================= */

body.fallen-menu-open{overflow:hidden}

.fallen-main-menu{
    position:fixed;
    inset:0;
    z-index:49000;
    display:none;
    overflow:auto;
    color:#efe5d3;
    background:#030405;
}
.fallen-main-menu.active{
    display:flex;
    align-items:center;
    justify-content:center;
    animation:fallenMenuReveal .8s ease both;
}
@keyframes fallenMenuReveal{
    from{opacity:0}
    to{opacity:1}
}

.fallen-main-menu-bg{
    position:fixed;
    inset:-3%;
    background:
        url("./images/cutscenes/intro_7.png") center 55% / cover no-repeat;
    filter:brightness(.48) saturate(.72) contrast(1.08);
    transform:scale(1.04);
    animation:fallenMenuDrift 18s ease-out both;
}
@keyframes fallenMenuDrift{
    from{transform:scale(1.08)}
    to{transform:scale(1.02)}
}

.fallen-main-menu-shade{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 50% 42%,rgba(0,0,0,.08),rgba(0,0,0,.58) 68%,rgba(0,0,0,.88)),
        linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.55));
    box-shadow:inset 0 0 170px rgba(0,0,0,.9);
}

.fallen-main-menu-panel{
    position:relative;
    z-index:2;
    width:min(760px,92vw);
    margin:48px auto;
    padding:42px clamp(24px,5vw,62px) 36px;
    text-align:center;
    border:1px solid rgba(191,151,93,.32);
    background:linear-gradient(180deg,rgba(8,9,11,.76),rgba(4,5,7,.88));
    box-shadow:
        0 32px 80px rgba(0,0,0,.65),
        inset 0 1px rgba(255,255,255,.035);
    backdrop-filter:blur(8px);
}

.fallen-main-menu-panel:before,
.fallen-main-menu-panel:after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,#a8804e,transparent);
    opacity:.7;
}
.fallen-main-menu-panel:before{top:12px}
.fallen-main-menu-panel:after{bottom:12px}

.fallen-menu-emblem{
    width:54px;
    height:54px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border:1px solid rgba(190,147,85,.52);
    transform:rotate(45deg);
    color:#c59a5d;
    background:rgba(18,13,10,.55);
    font-size:25px;
}
.fallen-menu-emblem::first-line{transform:rotate(-45deg)}

.fallen-menu-kicker{
    margin-top:6px;
    color:#b88c53;
    font:11px Georgia,"Times New Roman",serif;
    letter-spacing:.34em;
}
.fallen-main-menu-panel>h1{
    margin:11px 0 8px;
    color:#f3e8d4;
    font:700 clamp(38px,6vw,70px)/.98 Georgia,"Times New Roman",serif;
    letter-spacing:.035em;
    text-shadow:0 3px 18px #000;
}
.fallen-menu-subtitle{
    max-width:580px;
    margin:0 auto 30px;
    color:#cfc2ad;
    font:16px/1.55 Georgia,"Times New Roman",serif;
}

.fallen-menu-actions{
    display:grid;
    gap:12px;
    max-width:500px;
    margin:0 auto;
}
.fallen-menu-actions.hidden{display:none}

.fallen-menu-actions button,
.fallen-new-from-list,
.fallen-back-button{
    font-family:Georgia,"Times New Roman",serif;
}

.fallen-menu-primary,
.fallen-menu-secondary{
    position:relative;
    width:100%;
    min-height:76px;
    padding:14px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid #765d3d;
    letter-spacing:.04em;
}
.fallen-menu-primary{
    background:linear-gradient(180deg,rgba(137,86,39,.94),rgba(75,45,24,.97));
    border-color:#bd915a;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.fallen-menu-secondary{
    background:rgba(10,10,12,.78);
    color:#e7dcc9;
}
.fallen-menu-primary span,
.fallen-menu-secondary span{
    font-size:20px;
}
.fallen-menu-primary small,
.fallen-menu-secondary small{
    color:#c8b89e;
    font-size:12px;
    letter-spacing:.06em;
}
.fallen-menu-primary:disabled{
    opacity:.42;
    cursor:not-allowed;
    filter:grayscale(.6);
}

.fallen-continue-panel{
    display:none;
    text-align:left;
}
.fallen-continue-panel.active{display:block}

.fallen-continue-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(181,143,86,.28);
}
.fallen-continue-heading h2{
    margin:4px 0 0;
    font:30px Georgia,"Times New Roman",serif;
    color:#eee1ce;
}
.fallen-back-button{
    padding:8px 14px;
    background:rgba(9,9,11,.7);
    border:1px solid #67583f;
    color:#d7cab4;
}

.fallen-character-list{
    display:grid;
    gap:10px;
    max-height:min(52vh,520px);
    overflow:auto;
    padding:2px 4px 4px 0;
}
.fallen-character-card{
    width:100%;
    min-height:92px;
    padding:11px 15px 11px 11px;
    display:grid;
    grid-template-columns:68px 1fr auto;
    align-items:center;
    gap:15px;
    text-align:left;
    border:1px solid rgba(137,112,77,.48);
    background:linear-gradient(90deg,rgba(17,16,17,.94),rgba(8,9,11,.82));
    color:#eaddc9;
}
.fallen-character-card:hover{
    border-color:#bc9055;
    transform:translateY(-1px);
    background:linear-gradient(90deg,rgba(37,29,22,.96),rgba(10,10,12,.88));
}
.fallen-character-portrait{
    width:66px;
    height:66px;
    display:block;
    overflow:hidden;
    border:1px solid #8b6a43;
    background:#070708;
    box-shadow:0 0 0 3px rgba(0,0,0,.35);
}
.fallen-character-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.fallen-character-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.fallen-character-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:22px Georgia,"Times New Roman",serif;
    color:#f0e3cf;
}
.fallen-character-info>span{
    color:#c7b69d;
    font-size:14px;
}
.fallen-character-info small{
    color:#988b78;
    font-size:12px;
}
.fallen-character-enter{
    color:#c69a5e;
    font:13px Georgia,"Times New Roman",serif;
    letter-spacing:.07em;
    white-space:nowrap;
}

.fallen-new-from-list{
    width:100%;
    margin-top:14px;
    padding:13px 16px;
    border:1px solid rgba(123,100,69,.62);
    background:rgba(7,8,10,.75);
    color:#d8c9b2;
}

.fallen-no-characters{
    padding:30px 20px;
    display:flex;
    flex-direction:column;
    gap:7px;
    text-align:center;
    border:1px dashed rgba(140,113,76,.48);
    color:#a99c89;
}
.fallen-no-characters strong{
    color:#d8cab4;
    font:20px Georgia,"Times New Roman",serif;
}

.fallen-menu-footer{
    position:fixed;
    z-index:2;
    left:0;
    right:0;
    bottom:16px;
    text-align:center;
    color:rgba(207,181,142,.52);
    font:10px Georgia,"Times New Roman",serif;
    letter-spacing:.34em;
    pointer-events:none;
}

@media(max-width:640px){
    .fallen-main-menu{
        align-items:flex-start;
    }
    .fallen-main-menu-panel{
        width:94vw;
        margin:24px auto 52px;
        padding:34px 18px 28px;
    }
    .fallen-character-card{
        grid-template-columns:58px 1fr;
        gap:11px;
    }
    .fallen-character-portrait{
        width:56px;
        height:56px;
    }
    .fallen-character-enter{
        grid-column:2;
        margin-top:-7px;
    }
    .fallen-continue-heading{
        align-items:center;
    }
}


/* =========================
   VICTORY ACTIONS
   ========================= */
.victory-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-top:18px;
}
.victory-actions button{
    min-height:50px;
    padding:10px 9px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;
    line-height:1.25;
    letter-spacing:.04em;
}
.victory-actions button:disabled{
    opacity:.38;
    cursor:not-allowed;
    filter:grayscale(.55);
}
@media(max-width:560px){
    .victory-actions{
        grid-template-columns:1fr;
    }
}


/* =========================
   ARENA STAIRS / STONE GUARDIANS
   ========================= */

.arena-stairs{
    margin:18px 24px 0;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border:1px solid rgba(150,130,96,.35);
    background:
        linear-gradient(90deg,rgba(22,21,20,.96),rgba(10,11,13,.92)),
        radial-gradient(circle at 80% 50%,rgba(130,112,79,.12),transparent 45%);
    box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.arena-stairs-copy h3{
    margin:4px 0 6px;
    font:700 22px Georgia,"Times New Roman",serif;
    color:#e5dac7;
    letter-spacing:.05em;
}
.arena-stairs-copy p{
    margin:0;
    max-width:660px;
    color:#a99c89;
    line-height:1.5;
}
.stone-guardian-button{
    flex:0 0 auto;
    min-width:190px;
    min-height:50px;
    border:1px solid #8b7958;
    background:linear-gradient(180deg,#554a39,#2e2921);
    color:#efe4d1;
    font-family:Georgia,"Times New Roman",serif;
    letter-spacing:.05em;
}
.stone-guardian-button:hover{
    border-color:#c0a16e;
    transform:translateY(-1px);
}

.guardian-two-combatant[hidden]{
    display:none !important;
}
.combat-backdrop.guardian-combat .combatants{
    grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) minmax(150px,1fr);
    gap:14px;
}
.combat-backdrop.guardian-combat .combatant{
    min-width:0;
}
.combat-backdrop.guardian-combat .combat-portrait.enemy{
    background:
        radial-gradient(circle at 50% 42%,rgba(139,128,108,.30),rgba(29,29,30,.96)),
        #171719;
    border-color:#827660;
}
.stone-guardian-portrait span,
.combat-backdrop.guardian-combat .combat-portrait.enemy span{
    font-size:42px;
    color:#aaa08d;
    text-shadow:0 4px 15px #000;
}

@media(max-width:780px){
    .arena-stairs{
        margin:14px 12px 0;
        align-items:stretch;
        flex-direction:column;
    }
    .stone-guardian-button{
        width:100%;
    }
    .combat-backdrop.guardian-combat .combatants{
        grid-template-columns:1fr 1fr;
    }
    .combat-backdrop.guardian-combat .combat-vs{
        display:none;
    }
}


/* =========================
   UTILITY POTIONS
   ========================= */

.combat-potion-menu{
    position:relative;
    display:block;
}
.combat-potion-menu > .potion-action{
    width:100%;
    height:100%;
}
.combat-potion-dropdown{
    position:absolute;
    left:0;
    bottom:calc(100% + 8px);
    width:min(330px,82vw);
    padding:8px;
    border:1px solid rgba(183,154,105,.55);
    background:rgba(15,14,14,.98);
    box-shadow:0 16px 40px rgba(0,0,0,.55);
    z-index:21000;
}
.combat-potion-dropdown[hidden]{
    display:none !important;
}
.combat-potion-dropdown button{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:11px 12px;
    margin:0 0 6px;
    text-align:left;
    border:1px solid rgba(145,126,96,.32);
    background:rgba(255,255,255,.025);
}
.combat-potion-dropdown button:last-child{
    margin-bottom:0;
}
.combat-potion-dropdown button:hover{
    border-color:rgba(201,170,116,.75);
    background:rgba(201,170,116,.08);
}
.combat-potion-dropdown button span{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:700;
    color:#eadfcf;
}
.combat-potion-dropdown button small{
    color:#a99c89;
    line-height:1.35;
}
.combat-potion-empty{
    padding:10px;
    color:#8f8577;
    font-size:12px;
}


/* =========================
   COLLECTION LOG
   ========================= */

.log-backdrop{
    position:fixed;
    inset:0;
    z-index:19000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:
        radial-gradient(circle at 50% 15%,rgba(117,92,57,.14),transparent 38%),
        rgba(5,5,6,.92);
    backdrop-filter:blur(5px);
}
.log-backdrop.active{
    display:flex;
}
.log-panel{
    width:min(1180px,96vw);
    height:min(850px,92vh);
    overflow:hidden;
    border:1px solid rgba(176,147,102,.45);
    background:
        linear-gradient(180deg,rgba(31,28,25,.98),rgba(13,13,14,.99));
    box-shadow:0 32px 90px rgba(0,0,0,.7);
    display:flex;
    flex-direction:column;
}
.log-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:24px 28px 18px;
    border-bottom:1px solid rgba(176,147,102,.24);
}
.log-head h2{
    margin:3px 0 5px;
    font-family:Georgia,"Times New Roman",serif;
    letter-spacing:.08em;
}
.log-head p{
    margin:0;
    color:#9d9283;
}
.log-close{
    flex:0 0 auto;
}
.log-total-card{
    margin:18px 28px 14px;
    padding:15px 18px;
    border:1px solid rgba(176,147,102,.28);
    background:rgba(255,255,255,.025);
}
.log-total-card > div:first-child{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
}
.log-total-card span{
    font-size:11px;
    letter-spacing:.19em;
    color:#a99b86;
}
.log-total-card strong{
    font-family:Georgia,"Times New Roman",serif;
    font-size:24px;
    color:#e6d7bd;
}
.log-total-card small{
    display:block;
    margin-top:7px;
    color:#8e8579;
}
.log-progress-track{
    height:5px;
    margin-top:10px;
    overflow:hidden;
    background:rgba(255,255,255,.07);
}
.log-progress-track i{
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg,#6f7b52,#9db673);
    transition:width .25s ease;
}
.log-categories{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:0 28px 18px;
}
.log-category{
    min-height:76px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:12px;
    padding:13px 15px;
    text-align:left;
    border:1px solid rgba(176,147,102,.22);
    background:rgba(255,255,255,.018);
}
.log-category > span{
    grid-row:1 / span 2;
    font-size:23px;
    color:#96846a;
}
.log-category strong{
    font-family:Georgia,"Times New Roman",serif;
    letter-spacing:.06em;
}
.log-category small{
    grid-column:2;
    color:#7f776c;
}
.log-category > small:last-child{
    grid-column:3;
    grid-row:1 / span 2;
    font-weight:700;
    color:#b6aa97;
}
.log-category.active{
    border-color:rgba(190,157,104,.72);
    background:rgba(154,123,77,.10);
}
.log-workspace{
    min-height:0;
    flex:1;
    display:grid;
    grid-template-columns:minmax(270px,34%) 1fr;
    border-top:1px solid rgba(176,147,102,.18);
}
.log-list-panel{
    min-height:0;
    display:flex;
    flex-direction:column;
    border-right:1px solid rgba(176,147,102,.18);
    background:rgba(0,0,0,.13);
}
.log-list-head{
    padding:16px 18px 12px;
    border-bottom:1px solid rgba(176,147,102,.14);
}
.log-list-head span{
    display:block;
    font-size:10px;
    letter-spacing:.2em;
    color:#877a68;
}
.log-list-head strong{
    display:block;
    margin-top:3px;
    font-family:Georgia,"Times New Roman",serif;
}
.log-entry-list{
    min-height:0;
    overflow:auto;
    padding:8px;
}
.log-list-entry{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    margin:0 0 5px;
    text-align:left;
    border:1px solid transparent;
    background:rgba(255,255,255,.018);
}
.log-list-entry:hover,
.log-list-entry.active{
    border-color:rgba(177,148,102,.48);
    background:rgba(154,123,77,.08);
}
.log-list-entry strong{
    display:block;
    font-family:Georgia,"Times New Roman",serif;
    color:#ded3c2;
}
.log-list-entry small{
    display:block;
    margin-top:3px;
    color:#7f776d;
}
.log-list-entry > span{
    flex:0 0 auto;
    color:#aaa08f;
    font-weight:700;
}
.log-list-placeholder{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-align:center;
    padding:25px;
    color:#7f776d;
}
.log-list-placeholder > span{
    font-size:28px;
    color:#8d7c61;
}
.log-list-placeholder strong{
    color:#c9bdab;
    font-family:Georgia,"Times New Roman",serif;
}
.log-detail{
    min-width:0;
    min-height:0;
    overflow:auto;
    padding:24px;
}
.log-empty-detail{
    min-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#81796e;
}
.log-empty-detail > span{
    font-size:42px;
    color:#655c50;
}
.log-empty-detail h3{
    margin:12px 0 6px;
    font-family:Georgia,"Times New Roman",serif;
    color:#bfb3a1;
}
.log-empty-detail p{
    max-width:480px;
    margin:0;
}
.log-detail-head{
    padding-bottom:18px;
    border-bottom:1px solid rgba(176,147,102,.18);
}
.log-detail-head h3{
    margin:5px 0 8px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
    color:#e1d5c3;
}
.log-detail-head p{
    max-width:760px;
    color:#968d81;
    line-height:1.55;
}
.log-detail-stats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}
.log-detail-stats span{
    padding:7px 10px;
    border:1px solid rgba(176,147,102,.18);
    background:rgba(255,255,255,.02);
    color:#8f8679;
    font-size:12px;
}
.log-detail-stats b{
    color:#d7cab6;
}
.log-drop-section{
    padding-top:19px;
}
.log-drop-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
    margin-bottom:10px;
}
.log-drop-head strong{
    font-size:12px;
    letter-spacing:.16em;
    color:#b6a58a;
}
.log-drop-head small{
    max-width:520px;
    text-align:right;
    color:#766f66;
}
.log-drop-grid{
    display:grid;
    gap:7px;
}
.log-drop-row{
    min-height:60px;
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.017);
    color:#766f66;
}
.log-drop-row.discovered{
    border-color:rgba(105,151,84,.48);
    background:rgba(78,128,61,.11);
}
.log-drop-mark{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.08);
    font-weight:800;
    color:#625d56;
}
.log-drop-row.discovered .log-drop-mark{
    border-color:rgba(111,169,88,.55);
    color:#8fc979;
    background:rgba(78,128,61,.16);
}
.log-drop-row strong{
    display:block;
    color:#817b72;
    font-family:Georgia,"Times New Roman",serif;
}
.log-drop-row.discovered strong{
    color:#9bd17f;
}
.log-drop-row small{
    display:block;
    margin-top:3px;
    color:#69645d;
}
.log-drop-row.discovered small{
    color:#77936b;
}
.log-drop-row > b{
    color:#8e8476;
    font-size:12px;
}

@media (max-width:760px){
    .log-backdrop{
        padding:10px;
    }
    .log-panel{
        width:100%;
        height:96vh;
    }
    .log-head{
        padding:17px;
    }
    .log-head p{
        display:none;
    }
    .log-total-card{
        margin:12px 14px 10px;
    }
    .log-categories{
        padding:0 14px 12px;
        gap:6px;
    }
    .log-category{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        text-align:center;
        justify-items:center;
        min-height:86px;
    }
    .log-category > span{
        grid-row:auto;
    }
    .log-category small,
    .log-category > small:last-child{
        grid-column:auto;
        grid-row:auto;
    }
    .log-workspace{
        grid-template-columns:1fr;
        grid-template-rows:minmax(180px,36%) 1fr;
    }
    .log-list-panel{
        border-right:0;
        border-bottom:1px solid rgba(176,147,102,.18);
    }
    .log-detail{
        padding:16px;
    }
    .log-drop-head{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .log-drop-head small{
        text-align:left;
    }
}