/* Same edge as the hamburger; preserve the existing open/close handlers. */
#menu-drawer{left:auto!important;right:0!important;transform:translateX(100%);border-right:0!important;border-left:1px solid #a48953!important;box-shadow:-18px 0 60px #0009}
#menu-drawer.open{transform:translateX(0)}
#char-hub{overflow:auto;align-items:flex-start;background:#11100d;padding:90px 24px 40px;box-sizing:border-box;color:#eee2c9}
#char-hub .chub-bg{position:fixed;background:linear-gradient(180deg,#080a0bc9,#100f0ccc 48%,#090a09f5),url('../img/aden/castle-board.png') center/cover}
#char-hub .chub-panel{max-width:1100px;padding:20px 0 0;gap:10px;min-width:0}
#char-hub .chub-logo{font-size:17px;letter-spacing:6px;color:#dcc088;text-shadow:none}
#char-hub .chub-sub{color:#ae9a75;font-size:9px;margin:3px 0 20px;letter-spacing:4px}
#char-hub .chub-title{font:clamp(30px,4vw,48px) Georgia,serif;letter-spacing:.5px;color:#f2dfb7;text-transform:none;margin:0;text-align:center}
#char-hub .v39-hub-intro{font:14px/1.6 Arial,sans-serif;color:#b4ad9c;margin:0 0 24px;text-align:center}
#char-hub .chub-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:100%;max-width:940px;align-items:start}
#char-hub .chub-slot-wrap{width:100%;min-width:0;display:block}
#char-hub .chub-slot{width:100%;height:410px;min-height:0;border-radius:4px;padding:24px;gap:12px;border:1px solid #75613d;background:linear-gradient(160deg,#2a2822e8,#141411f5);box-shadow:inset 0 0 0 5px #0002,0 16px 36px #0006;transition:transform .2s,border-color .2s}
#char-hub .chub-slot:hover{transform:translateY(-4px);border-color:#d9b46a}
#char-hub .v39-slot-index{position:absolute;top:19px;left:22px;font:9px Arial,sans-serif;letter-spacing:2px;color:#ae9b77;z-index:2}
#char-hub .v39-hero{justify-content:flex-end;border-color:#b49757;padding:22px 18px;isolation:isolate}
#char-hub .v39-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0004,transparent 35%,#14130a55 50%,#13130dea 73%,#17160fff)}
#char-hub .chub-slot-avatar,#char-hub .chub-slot-portrait{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;overflow:hidden;z-index:-2;background:#171b17}
#char-hub .chub-slot-img,#char-hub .chub-portrait-img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 20%;border:0;border-radius:0;transform:none;filter:saturate(.82)}
#char-hub .chub-slot-name{position:relative;font:25px/1.2 Georgia,serif!important;color:#fff0cd!important;max-width:100%;overflow-wrap:anywhere;letter-spacing:.4px;text-align:center}
#char-hub .chub-slot-info,#char-hub .chub-slot-race,#char-hub .chub-slot-level{font:12px/1.6 Arial,sans-serif;color:#c5bba4;letter-spacing:.3px}
#char-hub .chub-slot-btn,#char-hub .chub-slot-play{position:relative;display:block;margin:8px 0 0;width:100%;box-sizing:border-box;padding:15px 8px;min-height:46px;opacity:1;background:linear-gradient(#ddbc79,#9b773e);border:1px solid #f1d9a0;border-radius:2px;color:#241b0c;font:700 11px Arial,sans-serif;letter-spacing:1.3px;text-align:center;box-shadow:inset 0 1px #fff5,0 5px 18px #0007}
#char-hub .chub-slot-plus{font:64px Georgia;color:#b49a68}
#char-hub .chub-slot-lock{font-size:27px;filter:grayscale(1);opacity:.5}
#char-hub .chub-slot-lock svg{width:40px;height:40px;color:#c8b588}
#char-hub .chub-top-ico svg{width:18px;height:18px;display:block}
#char-hub .chub-slot.locked,#char-hub .chub-slot-locked{background:linear-gradient(155deg,#24231de6,#13140ff2);border-color:#544b38}
#char-hub .chub-slot-price,#char-hub .chub-slot-lock-price{color:#b6a78b;background:none;border:0;font:12px Arial}
#char-hub .chub-slot-lock-glow{display:none}
#char-hub .chub-topbar{position:fixed;inset:18px 24px auto;display:flex;justify-content:space-between;gap:12px;z-index:3}
#char-hub .chub-top-btn{border:1px solid #6f5e3e;background:#181913e8;color:#d1bea0;border-radius:3px;min-height:44px;padding:10px 16px}
#char-hub .chub-delete-char-btn{position:static;margin-top:10px}
#char-hub .chub-slot:focus-visible,#char-hub button:focus-visible{outline:2px solid #ffe0a0;outline-offset:4px}
@media(max-width:650px){
 #char-hub{padding:84px 18px 30px}
 #char-hub .chub-topbar{inset:12px 14px auto}
 #char-hub .chub-top-btn{padding:8px 10px}
 #char-hub .chub-panel{padding:10px 0 0}
 #char-hub .chub-title{font-size:29px}
 #char-hub .chub-logo{font-size:14px;letter-spacing:4px}
 #char-hub .chub-sub{font-size:8px;margin-bottom:14px}
 #char-hub .v39-hub-intro{font-size:12px;margin-bottom:12px}
 #char-hub .chub-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:400px}
 #char-hub .chub-slot-wrap:has(.v39-hero),#char-hub .chub-slots>.v39-hero{grid-column:1/-1}
 #char-hub .chub-slot{height:170px;padding:20px 10px 12px;gap:9px}
 #char-hub .chub-slot.v39-hero{height:330px;padding:20px}
 #char-hub .chub-slot-img,#char-hub .chub-portrait-img{object-position:50% 24%}
 #char-hub .chub-slot-info{font-size:11px}
 #char-hub .v39-slot-index{font-size:8px;top:13px;left:12px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){#char-hub .chub-slot,#menu-drawer{transition:none}}
