/* XPLAYZ v136 | Isolated premium drawer (mobile/desktop customer landing). */
body.xp172 .xp172-drawer.xp136-drawer {
  --xp136-gold: #f7c95b; --xp136-navy: #07182d; --xp136-green: #23e18a;
  position:fixed;left:0;top:0;bottom:0;width:min(83vw,355px);max-width:calc(100vw - 44px);
  height:100vh;height:100dvh;display:flex;flex-direction:column;
  box-sizing:border-box;margin:0;padding:0;border:0;border-right:1px solid rgba(244,203,109,.35);
  background:radial-gradient(ellipse at 0 0,rgba(3,107,75,.28),transparent 43%),linear-gradient(155deg,#102f4f 0%,#091f39 32%,#07182d 75%,#051226 100%);
  color:#f7f8fd;z-index:1202;overflow:hidden;box-shadow:18px 0 48px rgba(0,7,18,.55);
  transform:translate3d(-105%,0,0);transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none;will-change:transform;
  font-family:Kanit,system-ui,sans-serif;
}
body.xp172 .xp172-drawer.xp136-drawer.is-open{transform:translate3d(0,0,0);pointer-events:auto}
body.xp172 .xp172-drawer-mask{display:none;position:fixed;inset:0;z-index:1201;background:rgba(2,11,26,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.xp172 .xp172-drawer-mask.is-open{display:block}
body.xp172 .xp136-icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
body.xp172 .xp136-icon{width:21px;height:21px;display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.xp172 .xp172-drawer-head.xp136-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-shrink:0;min-height:78px;padding:16px 17px 14px;margin:0;border:0;border-bottom:1px solid rgba(143,181,213,.18);background:linear-gradient(115deg,rgba(0,9,19,.4),rgba(6,62,49,.12))}
body.xp172 .xp136-drawer-brand{min-width:0;display:flex;align-items:center;text-decoration:none!important}
body.xp172 .xp136-drawer-head img{width:auto;max-width:174px;max-height:50px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(9,199,114,.2))}
body.xp172 .xp136-wordmark{font-size:27px;line-height:1;font-weight:900;color:#32e682;letter-spacing:-1px;text-shadow:0 2px 7px rgba(30,206,119,.42)}
body.xp172 .xp136-drawer-head button.xp136-close{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;border:1px solid rgba(183,210,234,.2);background:rgba(255,255,255,.06);color:#fff;padding:0;cursor:pointer}
body.xp172 .xp136-close .xp136-icon{width:20px;height:20px}
body.xp172 .xp136-scroll-area{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#426182 transparent;padding:14px 12px 24px}
body.xp172 .xp136-member-card{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:13px 12px;border:1px solid rgba(53,186,135,.29);border-radius:16px;background:linear-gradient(130deg,rgba(27,56,86,.96),rgba(16,46,73,.97) 68%,rgba(18,78,67,.81));text-decoration:none!important;box-shadow:0 9px 22px rgba(2,7,16,.21)}
body.xp172 .xp136-member-avatar{height:45px;width:45px;display:grid;place-items:center;border-radius:50%;border:2px solid #2bdd88;background:linear-gradient(135deg,#174b59,#09172b);color:#b7ffda;box-shadow:0 0 0 4px rgba(26,221,120,.09)}
body.xp172 .xp136-member-avatar .xp136-icon{height:25px;width:25px}
body.xp172 .xp136-member-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.xp172 .xp136-member-copy strong{color:#fff;font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
body.xp172 .xp136-member-copy small{color:var(--xp136-gold);font-size:11px;font-weight:600;line-height:1.3}
body.xp172 .xp136-member-card .xp136-chevron{color:#9db7cd;width:16px;height:16px}
body.xp172 .xp172-drawer-links.xp136-nav{display:flex;flex-direction:column;gap:2px;padding:0}
body.xp172 .xp136-section-label{margin:14px 4px 6px;padding:8px 5px 0;border-top:1px solid rgba(137,171,205,.18);font-size:11px;font-weight:650;letter-spacing:.025em;color:#8499b4;line-height:1.6}
body.xp172 .xp136-nav-item{display:flex;align-items:center;gap:13px;min-height:47px;padding:10px 12px;border:1px solid transparent;border-radius:12px;color:#eef4ff;background:transparent;font-size:13px;font-weight:600;line-height:1.35;text-decoration:none!important;transition:background .18s,border-color .18s,transform .18s}
body.xp172 .xp136-nav-item>.xp136-icon:first-child{color:#edc873}
body.xp172 .xp136-nav-item span{flex:1;min-width:0}
body.xp172 .xp136-nav-item .xp136-chevron{color:#9badbe;width:15px;height:15px}
body.xp172 .xp136-nav-item.is-active{border-color:rgba(247,201,91,.8);background:linear-gradient(100deg,rgba(255,193,56,.16),rgba(133,100,42,.12));color:#ffe58d;box-shadow:inset 3px 0 #ffcb47,0 2px 11px rgba(0,0,0,.14)}
body.xp172 .xp136-nav-item.is-active>.xp136-icon:first-child{color:#ffd054}
body.xp172 .xp136-nav-item:hover,body.xp172 .xp136-nav-item:focus-visible{background:rgba(92,135,172,.18);color:#fff;border-color:rgba(144,181,214,.24)}
body.xp172 .xp136-drawer-footer{flex:none;padding:12px 12px max(18px,env(safe-area-inset-bottom));border-top:1px solid rgba(129,159,195,.2);background:linear-gradient(180deg,rgba(4,16,34,.12),rgba(4,17,37,.95))}
body.xp172 .xp136-logout{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;border:1px solid rgba(148,190,226,.32);border-radius:13px;background:linear-gradient(120deg,#193b5b,#0e2a49);color:#fff;font-size:14px;font-weight:650;text-decoration:none!important}
body.xp172 .xp136-logout .xp136-icon{width:19px;height:19px}
body.xp172 .xp136-logout:hover{border-color:#e8c377;color:#f4dd9c}
body.xp172 .xp136-drawer a:focus-visible,body.xp172 .xp136-drawer button:focus-visible{outline:2px solid #f6d27d;outline-offset:2px}
@media (min-width:481px){body.xp172 .xp172-drawer.xp136-drawer{left:max(0px,calc((100vw - 480px)/2));width:355px;max-width:calc(100vw - 44px)}}
@media (prefers-reduced-motion:reduce){body.xp172 .xp172-drawer.xp136-drawer{transition:none}body.xp172 .xp136-nav-item{transition:none}}

/* V146: Desktop ONLY. Keep the bottom navigation clickable while the drawer
   is open. JS computes actual navigation clearance for all desktop heights. */
@media (min-width:1024px) {
  body.xp172 .xp172-drawer-mask.is-open {
    bottom: var(--xp146-menu-clearance, 90px);
  }
  body.xp172 .xp172-bottom-menu {
    cursor: pointer;
  }
  body.xp172 .xp172-bottom-menu[aria-expanded="true"] {
    color: #0a965a;
  }
  body.xp172 .xp172-bottom-menu:focus-visible {
    outline: 2px solid #e9b82a;
    outline-offset: -3px;
    border-radius: 9px;
  }
}


/* V147 desktop hotfix: pin the drawer at the LEFT side. The V136 rule for
 * widths over 481px centered it based on a 480px container, including desktop.
 * Keep all touch/mobile layouts unchanged (<1024px). */
@media screen and (min-width:1024px) {
  html body.xp172 #xp136SideDrawer.xp172-drawer.xp136-drawer {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: min(355px, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translate3d(-105%, 0, 0) !important;
    pointer-events: none !important;
    z-index: 1202 !important;
  }
  html body.xp172 #xp136SideDrawer.xp172-drawer.xp136-drawer.is-open {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }
  html body.xp172 .xp172-drawer-mask.is-open {
    bottom: var(--xp147-menu-clearance, 90px) !important;
    z-index: 1201 !important;
  }
}