/* XRPLOL public shell. Scoped so gameplay and existing profile rules stay intact. */
:root{--lol-bg:#09110d;--lol-panel:#101d14;--lol-line:#30462f;--lol-text:#f4f7eb;--lol-muted:#b5c5b0;--lol-green:#b8ef8b;--lol-gold:#f2ce7c;--lol-cyan:#91e4d8}
body.site-branded{background-color:var(--lol-bg);color:var(--lol-text)}
.site-bar,.site-bar *,.site-menu-panel,.site-menu-panel *{box-sizing:border-box}
.site-bar{position:relative;z-index:40;max-width:1160px;margin:0 auto;padding:18px 24px 12px;display:flex;align-items:center;gap:16px;font:14px/1.4 system-ui,sans-serif;text-align:left;color:var(--lol-text);border:0;background:var(--lol-bg)}
.site-wordmark{display:flex;align-items:center;gap:10px;text-decoration:none!important;color:var(--lol-text)!important;font-size:23px;font-weight:900;letter-spacing:-1px;white-space:nowrap}
.site-wordmark img{width:32px;height:32px;object-fit:contain;display:block}
.site-wordmark span span{color:var(--lol-green)}
.site-home-link{color:var(--lol-muted);text-decoration:none;min-height:44px;display:flex;align-items:center;font-size:12px}
.site-menu{position:relative;margin:0;padding:0;border:0;background:transparent;order:-1}
.site-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;cursor:pointer;border:1px solid var(--lol-line);border-radius:12px;background:#152218;color:#d5e6c7;font-size:20px;line-height:1}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu[open]>summary{background:#29432a}
.site-menu-panel{position:absolute;top:52px;left:0;width:min(330px,calc(100vw - 38px));padding:12px;background:#112017;border:1px solid #527447;box-shadow:0 18px 70px #000b;border-radius:16px;color:var(--lol-text);z-index:41}
.site-menu-panel a{display:flex;gap:14px;justify-content:space-between;align-items:center;min-height:43px;padding:9px 12px;border-radius:9px;color:var(--lol-text);text-decoration:none;font:600 14px/1.35 system-ui,sans-serif}
.site-menu-panel a:hover,.site-menu-panel a[aria-current=page]{background:#253f29;color:var(--lol-green)}
.site-menu-panel small{font-size:10px;color:var(--lol-muted)}
.site-menu-divider{height:1px;background:var(--lol-line);margin:7px 8px}
.site-account-slot{margin-left:auto;min-width:0;max-width:60%}
.site-bar .xrplol-account-bar{padding:0;border:0;background:none;gap:12px;min-width:0;margin:0;color:var(--lol-muted);display:flex;align-items:center;justify-content:flex-end;font-size:12px;flex-wrap:wrap}
.site-bar .xrplol-account-bar a{color:var(--lol-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;min-height:36px;display:flex;align-items:center}
.site-bar .xrplol-account-bar button{border:1px solid #607b4b;border-radius:10px;background:#243b24;color:#e2f4ce;font:700 12px/1.3 system-ui,sans-serif;min-height:40px;padding:9px 13px;cursor:pointer}
.site-bar .xrplol-account-bar button:disabled{opacity:.65;cursor:wait}
.site-bar a:focus-visible,.site-bar button:focus-visible,.site-menu>summary:focus-visible{outline:3px solid var(--lol-gold);outline-offset:4px}
.site-bar .site-profile-orb{width:40px;height:40px;min-height:40px;object-fit:contain;border:1px solid #537146;border-radius:12px;background:#152419;padding:4px}
.site-menu-panel a:last-child{color:var(--lol-cyan)}
.site-legal{font-family:system-ui,sans-serif}
body.site-branded .legal-brand{color:var(--lol-green)}
body.site-shell-ready>.legal-header{display:none}
@media(max-width:640px){.site-bar{padding:14px 16px 10px;gap:10px;flex-wrap:wrap}.site-wordmark{font-size:22px}.site-wordmark img{width:28px;height:28px}.site-menu>summary{width:38px;height:38px}.site-account-slot{max-width:none;flex:1;min-width:150px}.site-home-link{display:none}.site-bar .xrplol-account-bar{gap:7px}.site-bar .xrplol-account-bar a{max-width:145px;font-size:11px}.site-bar .xrplol-account-bar button{min-height:40px;padding:8px 10px;font-size:11px}.site-bar .site-profile-orb{display:none}}
@media(max-width:380px){.site-account-slot{flex-basis:100%;border-top:1px solid var(--lol-line);padding-top:9px}.site-bar .xrplol-account-bar{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.site-bar *{scroll-behavior:auto!important;transition:none!important}}
.site-footer{max-width:1160px;margin:0 auto;padding:24px 28px 36px;border-top:1px solid var(--lol-line);display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-align:left;font:12px/1.5 system-ui,sans-serif;color:var(--lol-muted)}.site-footer-brand{color:var(--lol-green);font-weight:900;font-size:20px;text-decoration:none}.site-footer nav{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto}.site-footer nav a{color:var(--lol-muted);min-height:36px;display:flex;align-items:center;text-decoration:none}.site-footer a:hover{color:var(--lol-text)}.site-footer a:focus-visible{outline:3px solid var(--lol-gold);outline-offset:3px}.site-branded .site-bar{box-shadow:none;border-radius:0}.site-branded .site-menu-panel{margin:0}.site-branded .site-menu{margin:0}.site-branded .site-menu>summary{padding:0}.site-branded .site-menu-panel a{font-family:system-ui,sans-serif}@media(max-width:700px){.site-footer{padding:24px 18px}.site-footer nav{margin:0;width:100%;gap:10px 15px}}
[data-site-shell]{position:sticky;top:0;z-index:50;background:var(--lol-bg)}

/* Owner-supplied logo: intrinsic aspect ratio, no recreated lettering. */
.site-bar .site-wordmark .site-brand-image{display:block;width:184px;height:auto;max-height:64px;object-fit:contain;border-radius:0}
.site-bar .site-wordmark{flex-shrink:0}
@media(max-width:700px){.site-bar .site-wordmark .site-brand-image{width:145px;max-height:49px}.site-bar{gap:10px}}
@media(max-width:360px){.site-bar .site-wordmark .site-brand-image{width:121px;max-height:43px}.site-bar{gap:7px}}

/* One original transparent lockup across public, profile, game and fallback headers. */
.site-footer-brand .site-brand-image,.legal-brand .site-brand-image{display:block;width:148px;max-width:100%;height:auto;object-fit:contain}
.site-fallback{max-width:1160px;margin:auto;display:flex;gap:18px;align-items:center;padding:20px 24px;font:13px/1.5 system-ui,sans-serif}
.site-fallback .site-brand-image{display:block;width:184px;max-width:100%;height:auto}.site-shell-ready .site-fallback{display:none}
.profile-v2 .top .brand{line-height:1;letter-spacing:normal;text-shadow:none;filter:none;max-width:100%;justify-self:center}
.profile-v2 .top .site-brand-image,.game-brandbar .site-brand-image{display:block;width:184px;max-width:100%;height:auto;max-height:64px;object-fit:contain;border:0;background:none;border-radius:0}
.profile-v2 .top{background:var(--lol-bg);border-color:var(--lol-line);box-shadow:none;padding:12px;min-height:84px}
.profile-v2 .menu-popover{background:var(--lol-panel);border-color:var(--lol-line);overflow:auto;overscroll-behavior:contain}
.profile-v2 .menu-popover a,.profile-v2 .menu-popover button{font:600 14px/1.4 Inter,system-ui,sans-serif;color:var(--lol-text);min-height:42px;padding:10px 12px}
.profile-v2 .menu-popover a:hover,.profile-v2 .menu-popover a[aria-current=page]{background:#253f29;color:var(--lol-green)}
.profile-v2 :is(.top a,.top button,.menu-popover a,.menu-popover button):focus-visible{outline:3px solid var(--lol-gold);outline-offset:3px}
.game-brandbar{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--lol-line);min-width:0}
.game-brandbar>[data-xrplol-account]{margin-left:auto;min-width:0}.game-brandbar .xrplol-account-bar{background:transparent;border:0;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.game-brandbar .game-help{font:600 12px/1.4 system-ui,sans-serif;display:flex;align-items:center;min-height:44px;flex-shrink:0;color:var(--lol-muted)}
.game-brandbar .site-wordmark{flex-shrink:0}.game-brandbar :is(a,button):focus-visible{outline:3px solid var(--lol-gold);outline-offset:3px}
.site-branded .page-section-nav{justify-content:flex-start;border-color:var(--lol-line);background:transparent}
.site-branded .page-section-nav a{font:600 13px/1.5 system-ui,sans-serif;color:var(--lol-muted)}
.education-page .card{background:var(--lol-panel);border-color:var(--lol-line);box-shadow:none}.education-page>header{background:var(--lol-bg);border-color:var(--lol-line)}
.education-page .faq-education-link{display:block;color:var(--lol-green);padding:12px 0;font-weight:700}
@media(max-width:700px){.profile-v2 .top .site-brand-image,.game-brandbar .site-brand-image{width:145px;max-height:49px}.profile-v2 .top{min-height:72px}.game-brandbar{gap:10px;flex-wrap:wrap}.game-brandbar .game-help{font-size:11px}.game-brandbar .xrplol-account-bar{font-size:11px}}
@media(max-width:420px){.game-brandbar>[data-xrplol-account]{max-width:calc(100% - 155px)}.game-brandbar .game-help{margin-left:auto;min-height:30px}.site-fallback{padding:16px;flex-wrap:wrap}.site-fallback .site-brand-image{width:145px}}
@media(max-width:360px){.profile-v2 .top .site-brand-image{width:121px}.profile-v2 .top{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}}

/* Keep legacy media inside its actual container even if external utility CSS fails.
   Do not conceal overflow at body level or crop the video controls. */
.education-page :is(main,section,article),.bg-lounge .overlay,.bg-lounge .overlay :is(section,div){min-width:0;max-width:100%;box-sizing:border-box}
.education-page :is(img,video),.bg-lounge video{display:block;max-width:100%;height:auto;box-sizing:border-box}
.education-page :is(h1,h2,h3,p,a),.bg-lounge .overlay :is(h1,p,a){overflow-wrap:anywhere}


/* 22 Oct 2026 mobile shell polish: keep account controls and menu usable on narrow screens. */
@media(max-width:520px){
  .site-bar{padding-left:12px;padding-right:12px;align-items:center}
  .site-bar .site-account-slot{min-width:0;max-width:100%;overflow:hidden}
  .site-bar .xrplol-account-bar{min-width:0;max-width:100%;gap:6px}
  .site-bar .xrplol-account-bar a,.site-bar .xrplol-account-bar button{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-menu-panel{max-width:calc(100vw - 24px)}
}