/* ========================================================================== LUMORA — TELAS INTERNAS (Fragmentos, Amigos, Clareira, Loja, Inventário e Perfil) Arquivo consolidado na revisão 0.33.30.16. A ordem interna preserva a cascata das folhas históricas para evitar regressões visuais. Cada seção indica a origem do bloco. ========================================================================== */ /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033303.css -------------------------------------------------------------------------- */ /* LUMORA 0.33.30.3 — six authentic screens restyled to the 0.33.30.2 Lobby palette. Scoped to existing modal kinds; no gameplay, room, economy or Phaser rules here. */ #modalBackdrop[data-modal-kind]{ --ui-bg:#0c0722;--ui-panel:#160e35;--ui-panel2:#1d1345;--ui-panel3:#28195a; --ui-line:#2c2060;--ui-line2:#493781;--ui-ink:#f1ecff;--ui-soft:#d9cef3; --ui-muted:#9c91c9;--ui-violet:#8b5cf6;--ui-gold:#ffc857; --ui-green:#3ee0a0;--ui-blue:#6ad4ff;--ui-red:#ff7a90; color:var(--ui-ink);font:500 14px/1.45 'Nunito','Segoe UI',sans-serif; } #modalBackdrop[data-modal-kind] *,#modalBackdrop[data-modal-kind] *::before,#modalBackdrop[data-modal-kind] *::after{box-sizing:border-box} #modalBackdrop[data-modal-kind] :is(button,input,select,textarea){font-family:'Nunito','Segoe UI',sans-serif} #modalBackdrop[data-modal-kind] :is(button,input,select,textarea,a):focus-visible{outline:2px solid var(--ui-gold)!important;outline-offset:2px!important} #modalBackdrop[data-modal-kind] *{scrollbar-width:thin!important;scrollbar-color:#6146a4 #120b2d!important} #modalBackdrop[data-modal-kind] *::-webkit-scrollbar{width:8px;height:8px} #modalBackdrop[data-modal-kind] *::-webkit-scrollbar-track{background:#120b2d;border-radius:16px} #modalBackdrop[data-modal-kind] *::-webkit-scrollbar-thumb{background:#6146a4;border-radius:16px;border:2px solid #120b2d} #modalBackdrop[data-modal-kind] *::-webkit-scrollbar-thumb:hover{background:#8b5cf6} /* The old game's subdialogs remain as-is; the shared shell affects the six top-level screens only. */ #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]){ background:rgba(8,4,24,.80)!important;backdrop-filter:blur(5px);padding:12px!important; } html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) > .modal{ display:flex!important;flex-direction:column!important;position:relative!important; width:min(1240px,calc(100vw - 24px))!important;max-width:min(1240px,calc(100vw - 24px))!important; min-width:0!important;height:min(880px,calc(100dvh - 24px))!important;max-height:calc(100dvh - 24px)!important; margin:auto!important;padding:0!important;overflow:hidden!important;border:1px solid var(--ui-line2)!important; border-radius:17px!important;background:var(--ui-bg)!important;box-shadow:0 25px 80px #040113a6!important; } html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) > .modal > .modal-head{ flex:0 0 auto!important;min-height:68px!important;height:auto!important;max-height:none!important; padding:11px 17px!important;display:flex!important;align-items:center!important;gap:12px!important; border:0!important;border-bottom:1px solid var(--ui-line)!important;background:var(--ui-panel)!important; } #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .modal-title{width:auto!important;flex:1;min-width:0;color:var(--ui-ink)!important} #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .modal-title :is(strong,b){font:800 21px/1.15 'Baloo 2',sans-serif!important;color:var(--ui-ink)!important;text-shadow:none!important;letter-spacing:0!important} #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .modal-title :is(span,em){font:600 11px/1.4 'Nunito',sans-serif!important;color:var(--ui-muted)!important;text-shadow:none!important} #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .modal-title :is(.friends-v2-heading-icon,.shop-v2-heading-icon,.inventory-v2-heading-icon,.profile-v2-modal-heading>i){width:39px!important;height:39px!important;border:1px solid var(--ui-line)!important;border-radius:11px!important;background:var(--ui-panel2)!important;color:var(--ui-gold)!important;font-size:17px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-title-lockup img{width:38px!important;height:38px!important;object-fit:contain} #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .modal-head .close-modal{ display:grid!important;place-items:center!important;flex:0 0 35px!important;width:35px!important;height:35px!important;min-width:35px!important; margin:0!important;padding:0!important;border:1px solid var(--ui-line2)!important;border-radius:9px!important; background:var(--ui-panel2)!important;color:var(--ui-soft)!important;font:800 24px/1 'Nunito',sans-serif!important; box-shadow:none!important;text-shadow:none!important;transform:none!important; } #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .modal-head .close-modal:hover{background:#3b2148!important;border-color:var(--ui-red)!important;color:var(--ui-red)!important} #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) > .modal > .modal-body{ flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important;min-width:0!important;max-height:none!important; padding:0!important;background:var(--ui-bg)!important;overflow:auto!important;scrollbar-gutter:auto!important; } /* The same practical navigation and actual account wallet appear on all six screens. */ #modalBackdrop .lumora-section-nav{display:none} #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) .lumora-section-nav{ display:flex!important;flex:0 0 auto!important;align-items:center;gap:9px;min-height:48px;padding:5px 12px; background:#120b2e;border-bottom:1px solid var(--ui-line);min-width:0; } #modalBackdrop .lumora-section-nav button{min-height:34px;padding:6px 10px;border:0;border-radius:9px;background:transparent;color:var(--ui-muted);font:800 11px 'Nunito',sans-serif;white-space:nowrap;cursor:pointer} #modalBackdrop .lumora-section-nav button:hover{background:var(--ui-panel2);color:var(--ui-ink)} #modalBackdrop .lumora-section-nav button.active{background:var(--ui-panel3);color:var(--ui-ink);box-shadow:inset 0 -2px var(--ui-violet)} #modalBackdrop .lumora-section-nav button.active i{color:var(--ui-gold)} #modalBackdrop .lumora-section-tabs{display:flex;gap:2px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none!important} #modalBackdrop .lumora-section-tabs::-webkit-scrollbar{display:none} #modalBackdrop .lumora-section-tabs i{margin-right:5px} #modalBackdrop .lumora-section-wallet{display:flex;gap:10px;flex:none;font-size:11px;font-weight:800} #modalBackdrop .lumora-section-wallet span{display:flex;align-items:center;gap:4px;color:var(--ui-gold)} #modalBackdrop .lumora-section-wallet span+span{color:var(--ui-blue)} #modalBackdrop .lumora-section-wallet img{width:16px;height:16px;object-fit:contain} /* Shared tactile surfaces. */ #modalBackdrop :is(.fragment-library,.profile-v2,.friends-v2,.clearing-app,.shop-v2,.inventory-v2){color:var(--ui-ink)!important;font-family:'Nunito','Segoe UI',sans-serif!important} #modalBackdrop :is(.fragment-library,.profile-v2,.friends-v2,.clearing-app,.shop-v2,.inventory-v2) :is(input,select,textarea){background:var(--ui-bg)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line2)!important;border-radius:10px!important;box-shadow:none!important} #modalBackdrop :is(.fragment-library,.profile-v2,.friends-v2,.clearing-app,.shop-v2,.inventory-v2) :is(input,select,textarea)::placeholder{color:var(--ui-muted)!important;opacity:.82} #modalBackdrop :is(.fragment-library,.profile-v2,.friends-v2,.clearing-app,.shop-v2,.inventory-v2) :is(input,select,textarea):focus{border-color:var(--ui-violet)!important} /* PROFILE: horizontal tabs, compact real Lumi header, card stats & progress bars. */ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2{ height:100%!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important; gap:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:var(--ui-bg)!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar{ flex:0 0 auto!important;min-height:0!important;height:53px!important;padding:0 20px!important;display:block!important; overflow:visible!important;border:0!important;border-bottom:1px solid var(--ui-line)!important;background:var(--ui-bg)!important; } #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar::after,#modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar::before{display:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar-brand{display:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-tabs{display:flex!important;align-items:stretch!important;gap:10px!important;height:100%!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-tab{ width:auto!important;min-width:120px!important;height:100%!important;min-height:0!important;padding:10px 13px!important; border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important; color:var(--ui-muted)!important;font:800 13px 'Nunito',sans-serif!important;box-shadow:none!important;gap:8px!important; } #modalBackdrop[data-modal-kind="profile"] .profile-v2-tab i{color:inherit!important;font-size:14px!important;width:19px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-tab.active{color:var(--ui-ink)!important;border-bottom-color:var(--ui-gold)!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main{ min-height:0!important;max-height:none!important;height:auto!important;flex:1 1 auto!important; padding:18px 20px 24px!important;overflow-y:auto!important;background:var(--ui-bg)!important; } #modalBackdrop[data-modal-kind="profile"] .profile-v2-hero{ display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;align-items:center!important;gap:17px!important; min-height:0!important;height:auto!important;padding:17px!important;border:1px solid var(--ui-line)!important;border-radius:15px!important; background:var(--ui-panel)!important;box-shadow:none!important; } #modalBackdrop[data-modal-kind="profile"] .profile-v2-hero::before,#modalBackdrop[data-modal-kind="profile"] .profile-v2-hero::after{display:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-lumi-wrap{width:98px!important;height:98px!important;min-width:98px!important;min-height:98px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-lumi-frame{width:98px!important;height:98px!important;min-height:98px!important;background:linear-gradient(145deg,var(--ui-panel3),var(--ui-panel2))!important;border:1px solid var(--ui-line2)!important;border-radius:50%!important;box-shadow:none!important;display:grid!important;place-items:center!important} #modalBackdrop[data-modal-kind="profile"] #own-profile-lumi-preview.profile-v2-lumi-preview{width:90px!important;height:82px!important;transform:scale(.69)!important;transform-origin:center center!important;overflow:visible!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-lumi-edit{position:absolute!important;right:0!important;bottom:0!important;left:auto!important;top:auto!important;width:29px!important;height:29px!important;padding:0!important;display:grid!important;place-items:center!important;background:var(--ui-panel3)!important;border:1px solid var(--ui-line2)!important;border-radius:9px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-ident{min-width:0!important;display:flex!important;flex-direction:column!important;gap:7px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-name-line{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-player-name{font:800 25px/1 'Baloo 2',sans-serif!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-title-badge{border:1px solid #675329!important;border-radius:20px!important;padding:4px 9px!important;background:#ffc8571b!important;color:var(--ui-gold)!important;font-size:11px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-level-line strong{color:var(--ui-ink)!important;font-size:12px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-xp{max-width:550px!important;gap:4px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-xp-track{height:8px!important;background:var(--ui-bg)!important;border:0!important;border-radius:20px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-xp-fill{background:linear-gradient(90deg,var(--ui-violet),var(--ui-blue))!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-id-row{color:var(--ui-muted)!important;font-size:11px!important;overflow-wrap:anywhere} #modalBackdrop[data-modal-kind="profile"] .profile-v2-presence{color:var(--ui-muted)!important;font-size:11px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats-main{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin:14px 0!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats article{min-width:0!important;min-height:74px!important;padding:12px 13px!important;display:flex!important;align-items:center!important;gap:8px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:var(--ui-panel)!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats article>i{color:var(--ui-violet)!important;font-size:16px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats article small{color:var(--ui-muted)!important;font-size:11px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats article strong{color:var(--ui-ink)!important;font:800 22px/1.1 'Baloo 2',sans-serif!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-streak{margin:0 0 14px!important;min-height:0!important;padding:12px 17px!important;display:flex!important;align-items:center!important;gap:13px!important;border:1px solid #61502c!important;border-radius:12px!important;background:var(--ui-panel)!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-streak::before,#modalBackdrop[data-modal-kind="profile"] .profile-v2-streak::after{display:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-streak-icon{width:38px!important;height:38px!important;color:var(--ui-gold)!important;background:#ffc8571d!important;border:0!important;border-radius:10px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-streak-value strong{color:var(--ui-gold)!important;font:800 25px 'Baloo 2',sans-serif!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-rates{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-rates article{display:flex!important;min-height:100px!important;align-items:flex-start!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-rates .profile-rate-copy{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} #modalBackdrop[data-modal-kind="profile"] .profile-v2-rates .profile-rate-copy strong{font-size:16px!important} #modalBackdrop[data-modal-kind="profile"] .profile-rate-track{height:7px;overflow:hidden;border-radius:6px;background:var(--ui-bg);display:block;width:100%} #modalBackdrop[data-modal-kind="profile"] .profile-rate-track>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ui-violet),var(--ui-blue))} /* FRAGMENT LIBRARY: original server records and favourite/record buttons in readable cards. */ #modalBackdrop[data-modal-kind="fragmentLibrary"] > .modal > .modal-body{padding:18px 20px!important;overflow-y:auto!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library{width:100%!important;gap:14px!important;min-width:0;display:grid;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-head{gap:12px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-head b{font:800 23px 'Baloo 2',sans-serif!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-copy{color:var(--ui-muted)!important;font-size:12px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-search{max-width:405px} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library button{background:var(--ui-panel2)!important;color:var(--ui-soft)!important;border:1px solid var(--ui-line2)!important;border-radius:9px!important;box-shadow:none!important;font-weight:800!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library button:hover{border-color:var(--ui-violet)!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-tabs{flex-wrap:wrap!important;gap:5px!important;border-bottom:1px solid var(--ui-line)!important;padding:0 0 11px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-tabs button{border-radius:25px!important;padding:7px 13px!important;color:var(--ui-muted)!important;font-size:11px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-tabs button.active{background:var(--ui-violet)!important;border-color:var(--ui-violet)!important;color:#fff!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-list{max-height:none!important;overflow:visible!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(205px,1fr))!important;gap:12px!important;padding:0!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-item{display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important;padding:11px!important;border:1px solid var(--ui-line)!important;border-radius:13px!important;background:var(--ui-panel)!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-item:hover{border-color:var(--ui-violet)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-thumb{height:90px;position:relative;overflow:hidden;isolation:isolate;border-radius:10px;background:linear-gradient(155deg,#32216f,#101b38)} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-thumb-star{position:absolute;left:65%;top:21%;color:var(--ui-gold);font-size:16px;filter:drop-shadow(0 0 8px #ffc857aa)} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-thumb-platform{position:absolute;height:6px;border-radius:4px;background:#5fa64a;width:26%;bottom:35%} #modalBackdrop[data-modal-kind="fragmentLibrary"] .platform-one{left:14%} #modalBackdrop[data-modal-kind="fragmentLibrary"] .platform-two{left:57%;bottom:58%} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-thumb-ground{position:absolute;bottom:0;left:0;right:0;height:16%;background:#7a4d2a} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-card-title{display:flex;gap:6px;justify-content:space-between;min-width:0} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-card-title>div{min-width:0} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-card-title h3{font-size:14px!important;color:var(--ui-ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-card-title p{color:var(--ui-muted)!important;font-size:11px!important;overflow-wrap:anywhere} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-id{font-size:11px;font-weight:800;color:var(--ui-gold);white-space:nowrap} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-stats{color:var(--ui-muted)!important;gap:9px!important;font-size:10px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-actions{margin-top:auto;flex-wrap:nowrap} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-actions .primary{flex:1;background:var(--ui-violet)!important;color:#fff!important;border-color:var(--ui-violet)!important;font-size:11px!important;padding:8px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-actions button.favorited{color:var(--ui-red)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-record{background:var(--ui-panel)!important;border-color:#6b5320!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-record strong,#modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-board-row b{color:var(--ui-gold)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-detail-stats>div,#modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-board-row{background:var(--ui-panel2)!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-note{color:var(--ui-muted)!important} /* FRIENDS: full-width rows, horizontal tabs, authenticated add/chat/modals unchanged. */ html body #modalBackdrop[data-modal-kind="friends"] .friends-v2{background:var(--ui-bg)!important;height:100%!important;min-height:0!important;padding:16px 20px!important;gap:12px!important;overflow:hidden!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-toolbar{display:flex!important;gap:5px!important;align-items:stretch!important;flex-wrap:wrap!important;border-bottom:1px solid var(--ui-line);padding-bottom:9px} #modalBackdrop[data-modal-kind="friends"] .friends-v2-tab{width:auto!important;min-height:37px!important;padding:7px 12px!important;flex:none!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--ui-muted)!important;font-size:12px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-tab-current{color:var(--ui-ink)!important;border-bottom:2px solid var(--ui-gold)!important;border-radius:0!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-tab span{width:auto!important;min-width:18px!important;height:18px!important;font-size:10px!important;padding:0 4px!important;background:var(--ui-panel3)!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-create-group{margin-left:auto!important;min-height:36px!important;padding:7px 12px!important;border:1px solid var(--ui-gold)!important;background:var(--ui-gold)!important;border-radius:10px!important;color:#2a1a00!important;box-shadow:none!important;font-size:11px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-search-row{grid-template-columns:auto minmax(0,1fr) auto!important;gap:10px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-add-action{min-height:37px;padding:8px 12px;border:1px solid var(--ui-line2);border-radius:9px;background:var(--ui-panel2);color:var(--ui-ink);font-size:11px;font-weight:800;cursor:pointer} #modalBackdrop[data-modal-kind="friends"] .friends-v2-add-action:hover{border-color:var(--ui-violet)} #modalBackdrop[data-modal-kind="friends"] .friends-v2-search{min-width:0!important;background:var(--ui-bg)!important;border:1px solid var(--ui-line2)!important;border-radius:10px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-list{min-height:0!important;overflow:auto!important;padding:0!important;gap:7px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-card{min-height:0!important;padding:10px 13px!important;border:1px solid var(--ui-line)!important;border-radius:11px!important;background:var(--ui-panel)!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-avatar{width:42px!important;height:42px!important;min-width:42px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-avatar-img{width:42px!important;height:42px!important;object-fit:contain!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-copy strong{color:var(--ui-ink)!important;font-size:13px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-copy :is(small,span){font-size:11px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-chat{background:var(--ui-violet)!important;border-color:var(--ui-violet)!important;color:#fff!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-banner{background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:11px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-submodal-card{background:var(--ui-panel)!important;border:1px solid var(--ui-line2)!important;border-radius:15px!important;box-shadow:0 20px 60px #0008!important} /* CLEARING: preserve real banner, requests, settings, member management and music. */ html body #modalBackdrop[data-modal-kind="clearing"] .clearing-app{height:100%!important;min-height:0!important;padding:15px 18px!important;gap:12px!important;background:var(--ui-bg)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-tabs{display:flex!important;gap:5px!important;flex-wrap:wrap!important;padding:0 0 10px!important;border-bottom:1px solid var(--ui-line)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-tab{padding:9px 13px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:7px 7px 0 0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-muted)!important;font-size:12px!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-tab.active{border-bottom-color:var(--ui-gold)!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-tab.gold{margin-left:auto!important;border:1px solid var(--ui-gold)!important;border-radius:9px!important;background:var(--ui-gold)!important;color:#2a1a00!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-layout{grid-template-columns:minmax(0,1fr) 235px!important;gap:12px!important;min-height:0!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-main{background:var(--ui-bg)!important;border:0!important;border-radius:0!important;padding:0 2px 4px!important;min-width:0!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-side{padding:15px!important;min-width:0!important;background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:13px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-card,#modalBackdrop[data-modal-kind="clearing"] .clearing-result,#modalBackdrop[data-modal-kind="clearing"] .clearing-request-v2,#modalBackdrop[data-modal-kind="clearing"] .clearing-overview-hero{background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-overview-hero{gap:16px!important;padding:15px!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-card h3{font:800 17px 'Baloo 2',sans-serif!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="clearing"] :is(.clearing-tag,.clearing-pill){background:var(--ui-panel3)!important;color:var(--ui-soft)!important;border-radius:20px!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-progress{background:var(--ui-bg)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-progress span{background:linear-gradient(90deg,var(--ui-violet),var(--ui-blue))!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-btn:not(.green):not(.red):not(.gold){background:var(--ui-violet)!important;color:#fff!important;border:1px solid var(--ui-violet)!important;border-radius:9px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-btn.gold{background:var(--ui-gold)!important;color:#2a1a00!important;border-color:var(--ui-gold)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-members th{background:var(--ui-panel2)!important;color:var(--ui-muted)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-members :is(th,td){border-bottom:1px solid var(--ui-line)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-create-formpanel,#modalBackdrop[data-modal-kind="clearing"] .clearing-create-preview-v2{background:var(--ui-panel)!important;border-color:var(--ui-line)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-banner-choice.selected{border-color:var(--ui-gold)!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-submodal-card{background:var(--ui-panel)!important;border-color:var(--ui-line2)!important} /* SHOP and INVENTORY: actual items and real Lumi, consistent two-column cards. */ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2,html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2{ display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;min-height:0!important;height:100%!important; background:var(--ui-bg)!important;overflow:hidden!important; } #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel{ padding:16px!important;min-height:0!important;border:0!important;border-right:1px solid var(--ui-line)!important; background:var(--ui-panel)!important;box-shadow:none!important; } #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-title,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-title{font:800 14px 'Baloo 2',sans-serif!important;letter-spacing:0!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-stage,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-stage{min-height:220px!important;height:220px!important;margin:0!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-frame,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-frame{width:210px!important;height:210px!important;min-height:0!important;background:linear-gradient(145deg,var(--ui-panel3),#101734)!important;border:1px solid var(--ui-line2)!important;border-radius:14px!important;filter:none!important;box-shadow:none!important;display:grid!important;place-items:center!important} #modalBackdrop[data-modal-kind="shop"] #shopLumiSpritePreview,#modalBackdrop[data-modal-kind="inventory"] #inventoryLumiSpritePreview{transform:translateY(0) scale(.9)!important;transform-origin:center center!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-copy strong{color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-copy span,#modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-note,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-quote{color:var(--ui-muted)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-note,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-equipped-list{background:var(--ui-panel2)!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-inventory,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-go-shop{background:var(--ui-panel2)!important;border:1px solid var(--ui-line2)!important;color:var(--ui-ink)!important;border-radius:10px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-content,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content{padding:16px!important;background:var(--ui-bg)!important;min-width:0!important;min-height:0!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-card{min-height:52px!important;padding:8px 11px!important;background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:11px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-card strong{color:var(--ui-gold)!important;font-size:17px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-buy-prismas{min-width:145px!important;padding:8px 11px!important;background:var(--ui-gold)!important;border-color:var(--ui-gold)!important;color:#2a1a00!important;border-radius:10px!important;box-shadow:none!important;font-size:12px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-toolbar{gap:8px!important;margin-top:12px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-filters,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-filters{gap:4px!important;padding-bottom:5px!important;scrollbar-width:thin!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-filters button,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-filters button{min-height:34px!important;height:34px!important;padding:7px 10px!important;background:transparent!important;border:1px solid var(--ui-line)!important;border-radius:20px!important;color:var(--ui-muted)!important;font-size:11px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-filters button.active,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-filters button.active{background:var(--ui-violet)!important;border-color:var(--ui-violet)!important;color:#fff!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(185px,1fr))!important;grid-auto-rows:max-content!important;gap:10px!important;min-height:0!important;overflow-y:auto!important;padding:3px 4px 8px 1px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item{min-width:0!important;min-height:0!important;padding:11px!important;background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item:hover,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item:hover{border-color:var(--ui-violet)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item.rarity-premium,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item.rarity-premium{border-color:#7151b7!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item.rarity-prestige,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item.rarity-prestige{border-color:#84682d!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-top{grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-icon{width:48px!important;height:48px!important;background:var(--ui-panel2)!important;border-color:var(--ui-line)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-copy strong,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item-info strong{color:var(--ui-ink)!important;font-size:12px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-copy small,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item-info small{color:var(--ui-muted)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-price{grid-column:1/-1!important;color:var(--ui-gold)!important;justify-self:start} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item p{color:var(--ui-muted)!important;font-size:11px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-actions{gap:6px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-btn,#modalBackdrop[data-modal-kind="shop"] .shop-v2-owned-btn{background:var(--ui-panel2)!important;border-color:var(--ui-line2)!important;color:var(--ui-ink)!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-purchase-btn,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item button:not(.equipped){background:var(--ui-violet)!important;border-color:var(--ui-violet)!important;color:#fff!important;box-shadow:none!important} #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item.is-equipped{border-color:var(--ui-gold)!important} #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-equipped-badge{background:#ffc8571e!important;color:var(--ui-gold)!important;border-color:#85692d!important} #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item button.equipped{background:var(--ui-panel2)!important;border-color:var(--ui-gold)!important;color:var(--ui-gold)!important} #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item-visual{background:linear-gradient(150deg,var(--ui-panel3),#101734)!important;border:1px solid var(--ui-line)!important} #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content-head strong{font:800 22px 'Baloo 2',sans-serif!important;color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-equipped-heading{color:var(--ui-ink)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-footer,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-footer{color:var(--ui-muted)!important} /* Submodal tone, without replacing existing payment/social handlers. */ #modalBackdrop[data-modal-kind="shop"] .shop-prisma-submodal-card,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-submodal-card{background:var(--ui-panel)!important;border-color:var(--ui-line2)!important} #modalBackdrop[data-modal-kind="shop"] .shop-prisma-submodal-head{background:var(--ui-panel2)!important;border-bottom-color:var(--ui-line)!important} /* Mid-size and narrow viewports, including short laptop screens. */ @media(max-width:1080px){ #modalBackdrop .lumora-section-wallet{display:none} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats-main{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2,html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2{grid-template-columns:215px minmax(0,1fr)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-frame,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-frame{width:178px!important;height:178px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-stage,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-stage{height:190px!important;min-height:190px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-row{grid-template-columns:1fr 1fr!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-buy-prismas{grid-column:1/-1!important;min-height:35px!important} } @media(max-width:760px){ #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]){padding:5px!important} html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) > .modal{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:12px!important} html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="fragmentLibrary"],[data-modal-kind="friends"],[data-modal-kind="clearing"],[data-modal-kind="shop"],[data-modal-kind="inventory"]) > .modal > .modal-head{padding:8px 11px!important;min-height:54px!important} #modalBackdrop .lumora-section-nav{padding:5px 7px!important} #modalBackdrop .lumora-section-nav button{font-size:10px;padding:6px 8px} #modalBackdrop[data-modal-kind="fragmentLibrary"] > .modal > .modal-body{padding:12px!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-head{align-items:stretch!important} #modalBackdrop[data-modal-kind="fragmentLibrary"] .fragment-library-search{max-width:none;width:100%} #modalBackdrop[data-modal-kind="profile"] .profile-v2-main{padding:12px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-hero{grid-template-columns:76px minmax(0,1fr)!important;padding:11px!important;gap:9px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-lumi-wrap,#modalBackdrop[data-modal-kind="profile"] .profile-v2-lumi-frame{width:72px!important;min-width:72px!important;height:72px!important;min-height:72px!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-stats-main{grid-template-columns:repeat(2,minmax(0,1fr))!important} #modalBackdrop[data-modal-kind="profile"] .profile-v2-rates{grid-template-columns:1fr!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2{padding:10px!important;overflow:auto!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-toolbar{gap:2px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-search-row{grid-template-columns:1fr!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-list{flex:1 1 auto!important;min-height:160px!important} #modalBackdrop[data-modal-kind="friends"] .friends-v2-create-group{margin-left:0!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-layout{grid-template-columns:1fr!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-side{display:none!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-app{padding:10px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2,html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2{grid-template-columns:1fr!important;overflow:auto!important;height:100%!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel{min-height:0!important;border-right:0!important;border-bottom:1px solid var(--ui-line)!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-stage,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-stage{height:155px!important;min-height:155px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-frame,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-frame{width:145px!important;height:145px!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-content,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content{overflow:visible!important;flex:1!important} #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog,#modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid{overflow:visible!important} } @media(prefers-reduced-motion:reduce){#modalBackdrop[data-modal-kind] *{transition:none!important;animation-duration:.01ms!important}} /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033304.css -------------------------------------------------------------------------- */ /* LUMORA 0.33.30.4 — Lobby pages vs in-room overlays. No second app or data store. */ /* A section is a full page when accessed from the Lobby: never show the dimmed Lobby or the floating dialog. In a room, no page class is applied and the existing modal keeps the live Phaser canvas underneath. Profile and Settings stay modals everywhere. */ html body #modalBackdrop.lumora-page-view{ position:fixed!important;inset:0!important;z-index:240!important; display:flex!important;align-items:stretch!important;justify-content:center!important; padding:0!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important; background:radial-gradient(900px 500px at 78% -10%,#3a1f86 0%,transparent 60%),#0c0722!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } html body #modalBackdrop.lumora-page-view > .modal{ position:relative!important;display:flex!important;flex-direction:column!important; flex:1 1 auto!important;width:min(1260px,calc(100% - 42px))!important; max-width:1260px!important;min-width:0!important; height:calc(100dvh - 36px)!important;min-height:590px!important;max-height:none!important; margin:18px auto!important;padding:0!important;border:0!important;border-radius:0!important; overflow:visible!important;background:transparent!important;box-shadow:none!important; } /* Put actual top navigation first; the screen title becomes its own section header. */ html body #modalBackdrop.lumora-page-view > .modal > .lumora-section-nav{ order:0!important;flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:10px!important; min-height:64px!important;margin:0 0 15px!important;padding:8px 13px!important; border:1px solid #2c2060!important;border-radius:16px!important; background:rgba(22,14,53,.98)!important;box-shadow:none!important; } #modalBackdrop .lumora-section-logo{display:none} #modalBackdrop.lumora-page-view .lumora-section-logo{ display:block!important;flex:0 0 auto;width:145px;height:45px;object-fit:contain; } #modalBackdrop.lumora-page-view .lumora-section-tabs{gap:3px!important;scrollbar-width:thin!important;scrollbar-color:#6146a4 #120b2d!important} #modalBackdrop.lumora-page-view .lumora-section-nav button{min-height:35px!important;font-size:12px!important} #modalBackdrop.lumora-page-view .lumora-section-nav button[data-lumora-section="back"]{color:#ffc857!important} #modalBackdrop.lumora-page-view .lumora-section-nav button.active{background:#28195a!important;box-shadow:inset 0 -2px 0 #8b5cf6!important} html body #modalBackdrop.lumora-page-view > .modal > .modal-head{ order:1!important;flex:0 0 auto!important;display:flex!important;align-items:center!important; min-height:86px!important;height:auto!important;max-height:none!important; padding:14px 20px!important;margin:0!important;border:1px solid #493781!important; border-bottom:0!important;border-radius:16px 16px 0 0!important; background:linear-gradient(90deg,rgba(17,10,54,.82),rgba(17,10,54,.35)),url('/assets/ui/profile/profile-modal-head-bg.webp') center 42%/cover no-repeat!important; } html body #modalBackdrop.lumora-page-view > .modal > .modal-head > .modal-title{ flex:1!important;color:#f1ecff!important;font-size:23px!important;font-weight:800!important; } html body #modalBackdrop.lumora-page-view > .modal > .modal-head .close-modal{ display:grid!important;place-items:center!important;align-items:center!important;justify-content:center!important; flex:0 0 35px!important;width:35px!important;min-width:35px!important;max-width:35px!important; height:35px!important;min-height:35px!important;max-height:35px!important; margin:0 0 0 auto!important;padding:0!important;border:1px solid #493781!important;border-radius:9px!important; background:#1d1345!important;color:#d9cef3!important;font:800 24px/1 'Nunito',sans-serif!important; box-shadow:none!important;text-shadow:none!important;transform:none!important; } html body #modalBackdrop.lumora-page-view > .modal > .modal-body{ order:2!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;height:auto!important; width:100%!important;padding:0!important;overflow:auto!important; border:1px solid #493781!important;border-top:1px solid #2c2060!important;border-radius:0 0 16px 16px!important; background:#0c0722!important;scrollbar-width:thin!important;scrollbar-color:#6146a4 #120b2d!important; } /* Never include a second app bar in the profile modal: profile and Settings are overlays. */ html body #modalBackdrop[data-modal-kind="profile"] .lumora-section-nav, html body #modalBackdrop[data-modal-kind="settings"] .lumora-section-nav{display:none!important} /* When in a game, retain a compact header and allow subpages to scroll inside the dialog. */ html body #modalBackdrop:not(.lumora-page-view) > .modal > .modal-body{ min-height:0!important;overflow:auto!important; } /* Clear long-standing Profile grid/flex collisions. The sidebar must never reserve the entire vertical viewport and push the real profile content outside the frame. */ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2{ position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important; grid-template-rows:52px minmax(0,1fr)!important;align-items:stretch!important; min-height:0!important;height:100%!important;max-height:100%!important; padding:0!important;margin:0!important;gap:0!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar{ grid-area:1/1/2/2!important;position:relative!important;display:flex!important;flex-direction:row!important; min-height:0!important;max-height:52px!important;height:52px!important;width:100%!important; padding:0 16px!important;margin:0!important;justify-content:flex-start!important;align-items:stretch!important; overflow:hidden!important;background:#0c0722!important;border:0!important;border-bottom:1px solid #2c2060!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-tabs{ position:relative!important;display:flex!important;flex-direction:row!important;align-items:stretch!important; gap:10px!important;min-height:0!important;height:52px!important;width:auto!important;margin:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar-brand, html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar::before, html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-sidebar::after{display:none!important;content:none!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main{ grid-area:2/1/3/2!important;position:relative!important;display:block!important; min-width:0!important;min-height:0!important;height:100%!important;max-height:100%!important; padding:16px 20px 22px!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important; visibility:visible!important;opacity:1!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-hero{ display:grid!important;grid-template-columns:112px minmax(0,1fr)!important; width:100%!important;min-height:128px!important;height:auto!important;gap:17px!important; padding:15px!important;background:#160e35!important;border:1px solid #2c2060!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-tab{ display:flex!important;align-items:center!important;justify-content:center!important; width:auto!important;min-width:116px!important;max-width:none!important; min-height:0!important;height:52px!important;padding:0 12px!important; border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important; color:#9c91c9!important;background:transparent!important;box-shadow:none!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-tab.active{color:#f1ecff!important;border-bottom-color:#ffc857!important} /* All six sections use consistent readable panels and avoid remnants of pink-heavy UI. */ #modalBackdrop[data-modal-kind="clearing"] > .modal > .modal-head, #modalBackdrop[data-modal-kind="friends"] > .modal > .modal-head{ border-bottom-color:#2c2060!important; background:linear-gradient(90deg,rgba(17,10,54,.82),rgba(17,10,54,.35)),url('/assets/ui/profile/profile-modal-head-bg.webp') center 42%/cover no-repeat!important; } #modalBackdrop[data-modal-kind="clearing"] .clearing-app, #modalBackdrop[data-modal-kind="friends"] .friends-v2{background:#0c0722!important} #modalBackdrop[data-modal-kind="clearing"] .clearing-side, #modalBackdrop[data-modal-kind="friends"] .friends-v2-card, #modalBackdrop[data-modal-kind="shop"] .shop-v2-item, #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-item{background:#160e35!important;border-color:#2c2060!important;box-shadow:none!important} /* The settings statuses reflect the actual verification-status response. */ #modalBackdrop[data-modal-kind="settings"] .settings-v2-email .settings-v2-email-status{ border:1px solid #493781!important;border-left:4px solid #9c91c9!important; border-radius:10px!important;background:#1d1345!important;padding:12px!important; } #modalBackdrop[data-modal-kind="settings"] .settings-v2-email #email-verify-label{display:block!important;color:#d9cef3!important} #modalBackdrop[data-modal-kind="settings"] .settings-v2-email[data-email-state="verified"] .settings-v2-email-status{border-left-color:#3ee0a0!important;background:#10382970!important} #modalBackdrop[data-modal-kind="settings"] .settings-v2-email[data-email-state="verified"] #email-verify-label{color:#3ee0a0!important} #modalBackdrop[data-modal-kind="settings"] .settings-v2-email[data-email-state="pending"] .settings-v2-email-status{border-left-color:#ffc857!important;background:#49351365!important} #modalBackdrop[data-modal-kind="settings"] .settings-v2-email[data-email-state="pending"] #email-verify-label{color:#ffc857!important} #modalBackdrop[data-modal-kind="settings"] .settings-v2-email[data-email-state="unverified"] .settings-v2-email-status{border-left-color:#ff7a90!important;background:#4c172a6b!important} #modalBackdrop[data-modal-kind="settings"] .settings-v2-email[data-email-state="unverified"] #email-verify-label{color:#ff7a90!important} @media(max-width:980px){ html body #modalBackdrop.lumora-page-view > .modal{width:calc(100% - 20px)!important;height:calc(100dvh - 20px)!important;min-height:0!important;margin:10px auto!important} html body #modalBackdrop.lumora-page-view > .modal > .lumora-section-nav{flex-wrap:wrap!important;padding:7px!important} #modalBackdrop.lumora-page-view .lumora-section-logo{width:110px;height:36px} #modalBackdrop.lumora-page-view .lumora-section-wallet{display:none!important} } @media(max-width:760px){ html body #modalBackdrop.lumora-page-view > .modal{width:100%!important;height:100dvh!important;margin:0!important} html body #modalBackdrop.lumora-page-view > .modal > .modal-head{min-height:70px!important;border-radius:0!important;padding:9px 12px!important} html body #modalBackdrop.lumora-page-view > .modal > .lumora-section-nav{min-height:48px!important;margin-bottom:0!important;border-radius:0!important;overflow-x:auto!important} html body #modalBackdrop.lumora-page-view > .modal > .modal-body{border-radius:0!important} #modalBackdrop.lumora-page-view .lumora-section-logo{display:none!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main{padding:11px!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-hero{grid-template-columns:78px minmax(0,1fr)!important;gap:10px!important} } /* Old Clareira shell used a 128px header and hard-coded body height. Remove that old modal geometry in both contexts without touching membership or room logic. */ html body #modalBackdrop[data-modal-kind="clearing"] > .modal > .modal-head{ min-height:76px!important;height:auto!important;max-height:none!important; padding:12px 18px!important;align-items:center!important; border-color:#2c2060!important; } html body #modalBackdrop[data-modal-kind="clearing"] > .modal > .modal-body{ flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important; padding:0!important;overflow:auto!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="clearing"] .modal-title, html body #modalBackdrop[data-modal-kind="clearing"] .clearing-title-lockup strong{ color:#f1ecff!important;font:800 22px 'Baloo 2',sans-serif!important; text-shadow:none!important; } html body #modalBackdrop[data-modal-kind="clearing"] .clearing-title-lockup span{ color:#9c91c9!important;font:600 11px 'Nunito',sans-serif!important; } html body #modalBackdrop[data-modal-kind="clearing"] .close-modal{ display:grid!important;place-items:center!important;position:static!important; width:35px!important;height:35px!important;min-width:35px!important;padding:0!important; color:#f1ecff!important;background:#1d1345!important;border:1px solid #493781!important; border-radius:9px!important;box-shadow:none!important;font:800 24px/1 'Nunito',sans-serif!important; } /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033305.css -------------------------------------------------------------------------- */ /* Lumora 0.33.30.5 — ONE Lobby navigation and a replaceable content viewport. Same modalBody, real scene events and data; no extra app, header or currency view. */ #lumora-lobby .lobby-v2-nav-btn.active, #lumora-lobby #lobby-nav-home.active{ background:rgba(105,65,211,.38)!important; box-shadow:inset 0 -2px 0 #ffc857,inset 0 0 0 1px rgba(157,121,255,.42)!important; color:#fff!important; } #lumora-lobby .lobby-v2-nav-btn.active i{color:#ffc857!important} #lumora-lobby .lobby-v2-topbar{position:relative!important;z-index:550!important} #lumora-lobby .lobby-account-wrap{position:relative;z-index:560!important} #lumora-lobby #lobby-account-menu{z-index:570!important} #lumora-lobby.lobby-section-active .lobby-shell{ grid-template-rows:72px minmax(0,1fr)!important; min-height:0!important; } #lumora-lobby.lobby-section-active .lobby-body{ grid-row:2!important;grid-column:1!important;display:grid!important; grid-template-columns:minmax(0,1fr)!important;min-height:0!important; height:100%!important;overflow:hidden!important; } #lumora-lobby.lobby-section-active .lobby-main{ display:flex!important;flex-direction:column!important;min-width:0!important; min-height:0!important;height:100%!important;overflow:hidden!important; } #lumora-lobby.lobby-section-active .lobby-main>.lobby-v2-hero, #lumora-lobby.lobby-section-active .lobby-main>.lobby-rooms-panel, #lumora-lobby.lobby-section-active .lobby-aside, #lumora-lobby.lobby-section-active .lobby-build-label{display:none!important} #lumora-lobby .lobby-section-page[hidden]{display:none!important} #lumora-lobby .lobby-section-page{ display:flex;flex-direction:column;flex:1;min-width:0;min-height:0; height:100%;width:100%;overflow:hidden; border:1px solid rgba(114,78,210,.72);border-radius:17px; background:rgba(12,7,34,.96); box-shadow:inset 0 0 24px rgba(82,54,171,.15); } #lumora-lobby .lobby-section-heading{ display:flex;align-items:center;gap:11px;flex:0 0 50px;min-height:50px; padding:0 19px;color:#f1ecff;font:800 21px/1.1 'Baloo 2','Nunito',sans-serif; border-bottom:1px solid #2c2060;background:#160e35; } #lumora-lobby .lobby-section-heading i{color:#ffc857;font-size:17px} /* A page is NOT a fixed backdrop. Its real content fills the original Lobby main column under the UNCHANGED official topbar. */ html body #lumora-lobby #modalBackdrop.lumora-page-view{ position:relative!important;inset:auto!important;display:block!important; flex:1 1 auto!important;align-items:stretch!important;justify-content:stretch!important; width:100%!important;height:100%!important;max-height:100%!important;min-height:0!important; padding:0!important;margin:0!important;border:0!important;overflow:hidden!important; background:transparent!important;box-shadow:none!important;filter:none!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } html body #lumora-lobby #modalBackdrop.lumora-page-view>.modal{ display:flex!important;flex-direction:column!important;position:relative!important; width:100%!important;max-width:none!important;min-width:0!important; height:100%!important;min-height:0!important;max-height:100%!important; padding:0!important;margin:0!important;overflow:hidden!important; background:transparent!important;border:0!important;border-radius:0!important; box-shadow:none!important;transform:none!important; } /* The old head-bg / moon belongs to an obsolete second navigation shell. */ html body #lumora-lobby #modalBackdrop.lumora-page-view>.modal>.modal-head, html body #lumora-lobby #modalBackdrop.lumora-page-view>.modal>.lumora-section-nav{display:none!important} html body #lumora-lobby #modalBackdrop.lumora-page-view>.modal>.modal-body{ flex:1 1 auto!important;order:initial!important;display:block!important; min-width:0!important;min-height:0!important;height:100%!important;max-height:100%!important; width:100%!important;margin:0!important;padding:14px!important;overflow:auto!important; border:0!important;border-radius:0!important;background:#0c0722!important; scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } /* In a room every section stays a modal and there is still no second topbar. */ html body #modalBackdrop .lumora-section-nav{display:none!important} html body #modalBackdrop.open:not(.lumora-page-view)>.modal{ max-height:calc(100dvh - 24px)!important;min-height:0!important; overflow:hidden!important; } html body #modalBackdrop.open:not(.lumora-page-view)>.modal>.modal-body{ flex:1 1 auto!important;min-height:0!important;max-height:none!important; overflow:auto!important;scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } /* Every real modal uses the SAME flat magical card treatment; do not reuse the old lunar image or the older pink/blue banner in any window. */ html body #modalBackdrop.open[data-modal-kind]>.modal>.modal-head{ background:#160e35!important;background-image:none!important; border-bottom:1px solid #493781!important;box-shadow:none!important; text-shadow:none!important;border-top-left-radius:16px!important;border-top-right-radius:16px!important; } html body #modalBackdrop.open[data-modal-kind]>.modal>.modal-head::before, html body #modalBackdrop.open[data-modal-kind]>.modal>.modal-head::after{ background-image:none!important;filter:none!important;box-shadow:none!important; } html body #modalBackdrop.open[data-modal-kind] .modal-title{ color:#f1ecff!important;text-shadow:none!important; } html body #modalBackdrop.open[data-modal-kind] .close-modal{ width:35px!important;height:35px!important;min-width:35px!important;min-height:35px!important;max-width:35px!important;max-height:35px!important; background:#1d1345!important;background-image:none!important; border:1px solid #493781!important;color:#d9cef3!important; border-radius:9px!important;box-shadow:none!important;text-shadow:none!important; } html body #modalBackdrop.open[data-modal-kind] .close-modal:hover{ background:#3b2148!important;border-color:#ff7a90!important;color:#ff7a90!important; } /* Existing submodal controls remain wired to the existing JS. This is only a shared visual layer across Profile/Friends/Clearing/Shop/Inventory/Settings. */ #modalBackdrop :is(.friends-v2-submodal-card,.clearing-submodal-card,.shop-prisma-submodal-card, .inventory-v2-submodal-card,.profile-v2-achievements-card,.settings-v2-section, .friends-v2-card,.clearing-card,.shop-v2-item,.inventory-v2-item){ background-color:#160e35!important;border-color:#2c2060!important; box-shadow:none!important; } #modalBackdrop :is(.shop-prisma-submodal-head,.clearing-submodal-head,.friends-v2-submodal-head, .inventory-v2-submodal-head,.profile-v2-achievements-head){ background:#1d1345!important;background-image:none!important; border-bottom:1px solid #493781!important;box-shadow:none!important; } #modalBackdrop :is(.shop-prisma-submodal-head,.clearing-submodal-head,.friends-v2-submodal-head, .inventory-v2-submodal-head,.profile-v2-achievements-head)::before{ background-image:none!important; } #modalBackdrop :is(.friends-v2,.clearing-app,.shop-v2,.inventory-v2,.profile-v2,.settings-v2){color:#f1ecff!important} #modalBackdrop :is(input,select,textarea):focus-visible, #modalBackdrop button:focus-visible, #lumora-lobby .lobby-v2-nav-btn:focus-visible{outline:2px solid #ffc857!important;outline-offset:2px!important} #modalBackdrop :is(.modal-body,.fragment-library-list,.friends-v2-list,.clearing-main, .shop-v2-catalog,.inventory-v2-grid,.settings-v2,.private-chat-messages), #lumora-lobby .lobby-section-page{scrollbar-width:thin;scrollbar-color:#8b5cf6 #160e35} #modalBackdrop :is(.modal-body,.fragment-library-list,.friends-v2-list,.clearing-main, .shop-v2-catalog,.inventory-v2-grid,.settings-v2,.private-chat-messages)::-webkit-scrollbar{width:7px;height:7px} #modalBackdrop :is(.modal-body,.fragment-library-list,.friends-v2-list,.clearing-main, .shop-v2-catalog,.inventory-v2-grid,.settings-v2,.private-chat-messages)::-webkit-scrollbar-thumb{background:#8b5cf6;border-radius:8px} #modalBackdrop :is(.modal-body,.fragment-library-list,.friends-v2-list,.clearing-main, .shop-v2-catalog,.inventory-v2-grid,.settings-v2,.private-chat-messages)::-webkit-scrollbar-track{background:#160e35} /* Prevent clipped content when the formerly floating views become real pages. */ #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="fragmentLibrary"] .fragment-library-list{ max-height:none!important;min-height:0!important;overflow:auto!important; grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr))!important; } #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="fragmentLibrary"] .fragment-library{ min-height:100%!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important; } #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="friends"] .friends-v2{ min-height:0!important;height:100%!important;max-height:100%!important; } #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="shop"] .shop-v2, #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="inventory"] .inventory-v2{ min-height:0!important;height:100%!important;max-height:100%!important; } #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="clearing"] .clearing-app{ min-height:0!important;height:100%!important;max-height:100%!important; } @media(max-width:1250px){ #lumora-lobby.lobby-section-active .lobby-shell{width:calc(100vw - 32px)!important} #lumora-lobby .lobby-section-page{min-height:0} #lumora-lobby #modalBackdrop.lumora-page-view>.modal>.modal-body{padding:10px!important} } @media(max-width:760px){ #lumora-lobby.lobby-section-active .lobby-shell{width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;margin:6px auto!important} #lumora-lobby .lobby-section-heading{min-height:43px;flex-basis:43px;font-size:18px} #lumora-lobby .lobby-v2-nav{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#8b5cf6 #160e35} #lumora-lobby #modalBackdrop.lumora-page-view>.modal>.modal-body{padding:8px!important} #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="shop"] .shop-v2, #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="inventory"] .inventory-v2{ grid-template-columns:minmax(0,1fr)!important;overflow:auto!important; } #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="shop"] .shop-v2-preview-panel, #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="inventory"] .inventory-v2-preview-panel{ border-right:0!important;border-bottom:1px solid #2c2060!important; } #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="clearing"] .clearing-layout{grid-template-columns:minmax(0,1fr)!important} } @media(prefers-reduced-motion:reduce){#lumora-lobby .lobby-section-page *{scroll-behavior:auto!important;transition:none!important}} /* Modal header dimensions and typography: consistent with the Lobby cards. */ html body #modalBackdrop.open[data-modal-kind]:not(.lumora-page-view)>.modal>.modal-head{ min-height:74px!important;height:74px!important;max-height:74px!important;flex:0 0 74px!important; padding:11px 18px!important;gap:12px!important; } #modalBackdrop :is(.settings-v2-modal-heading,.profile-v2-modal-heading,.friends-v2-modal-heading, .shop-v2-modal-heading,.inventory-v2-modal-heading,.clearing-title-lockup){ display:flex!important;align-items:center!important;gap:12px!important; } #modalBackdrop :is(.settings-v2-modal-heading,.profile-v2-modal-heading,.friends-v2-modal-heading, .shop-v2-modal-heading,.inventory-v2-modal-heading,.clearing-title-lockup) strong{ color:#f1ecff!important;font:800 22px/1.15 'Baloo 2','Nunito',sans-serif!important; text-shadow:none!important;letter-spacing:0!important; } #modalBackdrop :is(.settings-v2-modal-heading,.profile-v2-modal-heading,.friends-v2-modal-heading, .shop-v2-modal-heading,.inventory-v2-modal-heading,.clearing-title-lockup) span{ color:#9c91c9!important;font:600 11px/1.4 'Nunito',sans-serif!important; text-shadow:none!important;margin-top:3px!important; } #modalBackdrop :is(.settings-v2-heading-icon,.profile-v2-heading-icon,.friends-v2-heading-icon, .shop-v2-heading-icon,.inventory-v2-heading-icon){ display:grid!important;place-items:center!important;flex:0 0 43px!important; width:43px!important;height:43px!important;min-width:43px!important; border-radius:11px!important;border:1px solid #493781!important; color:#ffc857!important;background:#2a1a54!important;box-shadow:none!important; font-size:20px!important; } #modalBackdrop .clearing-title-lockup img{width:44px!important;height:44px!important;object-fit:contain!important} #modalBackdrop .profile-v2-submodal-card, #modalBackdrop .clearing-subdialog{background:#160e35!important;border:1px solid #493781!important;box-shadow:0 20px 60px #0009!important;border-radius:15px!important} #modalBackdrop :is(.profile-v2-submodal-head,.clearing-subhead){ background:#1d1345!important;background-image:none!important;border-bottom:1px solid #493781!important; box-shadow:none!important;text-shadow:none!important; } #modalBackdrop .clearing-settings-panel{background:#160e35!important;border-color:#2c2060!important;box-shadow:none!important} #modalBackdrop :is(.profile-v2-submodal-close,.clearing-subclose,.friends-v2-close,.shop-prisma-close){ background:#332050!important;background-image:none!important;border:1px solid #7951a9!important; color:#f1ecff!important;border-radius:9px!important;box-shadow:none!important; } #modalBackdrop :is(.profile-v2-submodal-close,.clearing-subclose,.friends-v2-close,.shop-prisma-close):hover{ color:#ffc857!important;border-color:#ffc857!important;background:#493067!important; } /* Keep the one official navbar usable on laptop widths: never let wallet/account overlap the links as in the previous floating-shell implementation. */ @media(max-width:1450px){ #lumora-lobby .lobby-v2-topbar{gap:8px!important;padding:6px 12px!important} #lumora-lobby .lobby-v2-brand{flex:0 0 155px!important;width:155px!important;min-width:0!important} #lumora-lobby .lobby-brand-logo{width:150px!important;max-width:150px!important;height:auto!important} #lumora-lobby .lobby-v2-wallet{flex:0 0 224px!important;min-width:224px!important;max-width:224px!important;height:42px!important} #lumora-lobby .lobby-v2-wallet span{flex:1!important;min-width:0!important;padding:0 6px!important;font-size:10px!important} #lumora-lobby .lobby-v2-profile-card{width:188px!important;min-width:0!important;height:55px!important;min-height:55px!important;padding:5px 7px!important;gap:6px!important} #lumora-lobby .lobby-v2-avatar{width:41px!important;height:41px!important;flex:0 0 41px!important} #lumora-lobby .lobby-v2-avatar img{width:37px!important;height:37px!important} #lumora-lobby .lobby-v2-profile-copy strong{font-size:13px!important} #lumora-lobby .lobby-v2-nav{flex:1 1 auto!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important} #lumora-lobby .lobby-v2-nav-btn{padding:0 8px!important;flex:0 0 auto!important} } @media(max-width:1180px){ #lumora-lobby .lobby-v2-wallet{display:none!important} #lumora-lobby .lobby-v2-brand{flex-basis:125px!important;width:125px!important} #lumora-lobby .lobby-brand-logo{width:120px!important;max-width:120px!important} #lumora-lobby .lobby-v2-profile-card{width:178px!important} } @media(max-width:760px){ #lumora-lobby .lobby-v2-brand{flex-basis:95px!important;width:95px!important} #lumora-lobby .lobby-brand-logo{width:90px!important;max-width:90px!important} #lumora-lobby .lobby-v2-profile-card{width:136px!important} #lumora-lobby .lobby-v2-profile-copy strong{font-size:11px!important} #lumora-lobby .lobby-v2-avatar{width:34px!important;height:34px!important;flex-basis:34px!important} #lumora-lobby .lobby-v2-avatar img{width:30px!important;height:30px!important} } /* More specific than historical per-kind !important declarations: the legacy secondary topbar must NEVER reappear, not even inside a game-room modal. */ html body #modalBackdrop.open[data-modal-kind] .lumora-section-nav, html body #lumora-lobby #modalBackdrop.lumora-page-view .lumora-section-nav{ display:none!important;visibility:hidden!important;pointer-events:none!important; } /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033306.css -------------------------------------------------------------------------- */ /* Lumora 0.33.30.6 — Profile and Inventory layout repair. The profile remains a modal. The inventory is a Lobby page, or a modal in a room. Override historical desktop two-column profile rules without changing data/actions. */ /* PROFILE: the old 260px + 1fr grid survived the first modal redesign. Both sidebar and main were placed in column ONE; the entire profile was 260px wide. A single content column and explicit full-width grid areas fix this at source. */ html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2{ display:grid!important;grid-template-columns:minmax(0,1fr)!important; grid-template-rows:52px minmax(0,1fr)!important; width:100%!important;min-width:0!important;max-width:none!important; height:100%!important;min-height:0!important;max-height:100%!important; gap:0!important;overflow:hidden!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-sidebar{ grid-area:1/1/2/-1!important;width:100%!important;min-width:0!important; height:52px!important;min-height:52px!important;max-height:52px!important; padding:0 20px!important;display:flex!important;flex-direction:row!important; align-items:stretch!important;justify-content:flex-start!important; border:0!important;border-bottom:1px solid #2c2060!important; background:#0c0722!important;overflow-x:auto!important;overflow-y:hidden!important; } html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main{ grid-area:2/1/3/-1!important;width:100%!important;max-width:none!important; min-width:0!important;min-height:0!important;height:100%!important; display:block!important;padding:16px 20px 22px!important; overflow-x:hidden!important;overflow-y:auto!important; visibility:visible!important;opacity:1!important; background:#0c0722!important;scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero{ display:grid!important;width:100%!important;min-width:0!important; grid-template-columns:112px minmax(0,1fr)!important; gap:17px!important;min-height:128px!important;height:auto!important; padding:15px!important;border:1px solid #2c2060!important; background:#160e35!important;box-shadow:none!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-wrap, html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-frame{ width:98px!important;min-width:98px!important;height:98px!important;min-height:98px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-ident{ display:flex!important;min-width:0!important;width:auto!important; flex-direction:column!important;gap:7px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats-main{ display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important; width:100%!important;gap:10px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-rates{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important;gap:10px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats article{ min-width:0!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats article > div{ min-width:0!important;overflow-wrap:anywhere!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-streak{ width:100%!important;min-width:0!important; } /* INVENTORY: one internal catalog scroll instead of a scrolling body, compact sidebar that stays inside its column, and readable, adaptive cards. */ html body #modalBackdrop[data-modal-kind="inventory"] > .modal > .modal-body{ overflow:hidden!important;padding:0!important;min-height:0!important; } html body #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="inventory"] > .modal > .modal-body{ overflow:hidden!important;padding:0!important;min-height:0!important; } html body #modalBackdrop[data-modal-kind="inventory"] > .modal > .modal-body > .inventory-v2{ display:grid!important;grid-template-columns:clamp(226px,23%,270px) minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important; height:100%!important;min-height:0!important;max-height:100%!important; width:100%!important;min-width:0!important;overflow:hidden!important; background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2 > .inventory-v2-preview-panel{ display:flex!important;flex-direction:column!important;gap:11px!important; min-width:0!important;min-height:0!important;max-width:100%!important; padding:15px!important;overflow:hidden!important; background:#160e35!important;border-right:1px solid #2c2060!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-stage{ width:100%!important;height:194px!important;min-height:194px!important; flex:0 0 194px!important;margin:0!important;padding:0!important; display:grid!important;place-items:center!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-frame{ width:min(100%,220px)!important;height:190px!important; max-width:100%!important;max-height:100%!important;min-width:0!important; margin:auto!important;background:linear-gradient(155deg,#2b2059,#101633)!important; border:1px solid #493781!important;border-radius:13px!important; box-shadow:none!important;filter:none!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel #inventoryLumiSpritePreview{ max-width:100%!important;margin:auto!important;transform:none!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-heading{ flex:0 0 auto!important;margin:0!important;font:800 16px/1.2 'Baloo 2','Nunito',sans-serif!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-list{ flex:0 1 auto!important;min-height:0!important;max-height:240px!important; margin:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important;overflow-y:auto!important;overflow-x:hidden!important; scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-chip{ min-width:0!important;min-height:87px!important;height:auto!important; padding:7px 5px!important;gap:3px!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-icon{ width:36px!important;height:36px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-quote{ margin-top:auto!important;padding-top:9px!important;font-size:11px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2 > .inventory-v2-content{ display:flex!important;flex-direction:column!important; min-width:0!important;min-height:0!important;height:100%!important; padding:16px!important;overflow:hidden!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-content-head{ flex:0 0 auto!important;min-width:0!important;gap:10px!important;align-items:center!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-head-actions{ display:flex!important;flex-direction:row!important;align-items:center!important; min-width:0!important;gap:9px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-search{ width:clamp(170px,20vw,250px)!important;max-width:100%!important; min-width:0!important;height:40px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-go-shop{ min-width:135px!important;width:auto!important;height:40px!important; padding:0 12px!important;background:#28195a!important;border-color:#493781!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-filters{ flex:0 0 auto!important;gap:5px!important;margin:13px 0 0!important; min-width:0!important;padding-bottom:7px!important; overflow-x:auto!important;overflow-y:hidden!important; scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-filters::-webkit-scrollbar{ display:block!important;height:5px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-filters button{ min-width:0!important;height:32px!important;padding:0 12px!important; border-radius:18px!important;background:#1d1345!important;border-color:#493781!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-filters button.active{ background:#8b5cf6!important;border-color:#8b5cf6!important;box-shadow:none!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid{ display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,172px),1fr))!important; grid-auto-rows:225px!important;align-content:start!important; flex:1 1 auto!important;min-height:0!important;height:auto!important; gap:11px!important;margin-top:10px!important;padding:1px 5px 3px 1px!important; overflow-y:auto!important;overflow-x:hidden!important; scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item{ height:225px!important;min-height:225px!important;max-height:225px!important; display:flex!important;flex-direction:column!important;padding:9px!important; min-width:0!important;background:#160e35!important;border-color:#493781!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item.is-equipped{ border-color:#ffc857!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-visual{ height:112px!important;min-height:112px!important;overflow:hidden!important; background:linear-gradient(155deg,#2b2059,#101633)!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-visual img{ max-width:min(100%,113px)!important;max-height:100px!important; width:auto!important;height:auto!important;object-fit:contain!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-info{ padding:7px 1px 5px!important;min-height:0!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-info strong{ font:800 13px/1.2 'Nunito','Segoe UI',sans-serif!important; display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important; white-space:normal!important;min-height:16px!important;max-height:32px!important; overflow:hidden!important;text-overflow:ellipsis!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-info small{ font-size:10px!important;margin-top:3px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item > button{ min-height:33px!important;height:33px!important;margin-top:auto!important; background:#8b5cf6!important;border-color:#8b5cf6!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item > button.equipped{ background:#241a39!important;color:#ffc857!important;border-color:#ffc857!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-footer{ flex:0 0 auto!important;min-height:24px!important;padding-top:5px!important; } /* Responsive views stay inside their real overlay/page; never exceed viewport. */ @media(max-width:1000px){ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats-main{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-rates{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body #modalBackdrop[data-modal-kind="inventory"] > .modal > .modal-body > .inventory-v2{grid-template-columns:210px minmax(0,1fr)!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2 > .inventory-v2-preview-panel{padding:11px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-content-head{align-items:flex-start!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-head-actions{flex-wrap:wrap!important;justify-content:flex-end!important} } @media(max-width:760px){ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero{grid-template-columns:80px minmax(0,1fr)!important;gap:9px!important;padding:11px!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-wrap, html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-frame{width:76px!important;min-width:76px!important;height:76px!important;min-height:76px!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats-main{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-rates{grid-template-columns:minmax(0,1fr)!important} html body #modalBackdrop[data-modal-kind="inventory"] > .modal > .modal-body{overflow-y:auto!important} html body #lumora-lobby #modalBackdrop.lumora-page-view[data-modal-kind="inventory"] > .modal > .modal-body{overflow-y:auto!important} html body #modalBackdrop[data-modal-kind="inventory"] > .modal > .modal-body > .inventory-v2{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow:visible!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2 > .inventory-v2-preview-panel{display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:8px!important;overflow:visible!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-title{grid-column:1/-1!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-stage{grid-column:1!important;grid-row:2!important;min-height:120px!important;height:120px!important;max-height:120px!important;flex-basis:auto!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-frame{width:145px!important;height:115px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-heading{grid-column:2!important;grid-row:2!important;align-self:start!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-list{grid-column:2!important;grid-row:2!important;align-self:end!important;max-height:96px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-quote{display:none!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2 > .inventory-v2-content{height:auto!important;min-height:320px!important;overflow:visible!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid{overflow:visible!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))!important} } /* The base Lobby shell has height:auto for room discovery. A section page must instead use a definite viewport height, otherwise its nested 100% catalog expands the entire Lobby and produces the outer page scrollbar. */ html body #lumora-lobby.lobby-minimal-astral.lobby-section-active .lobby-shell{ height:calc(100dvh - 32px)!important;min-height:0!important; max-height:calc(100dvh - 32px)!important;overflow:hidden!important; display:flex!important;flex-direction:column!important; } html body #lumora-lobby.lobby-minimal-astral.lobby-section-active .lobby-body{ height:auto!important;min-height:0!important;flex:1 1 auto!important; overflow:hidden!important; } html body #lumora-lobby.lobby-minimal-astral.lobby-section-active .lobby-main, html body #lumora-lobby.lobby-minimal-astral.lobby-section-active .lobby-section-page{ height:100%!important;min-height:0!important;overflow:hidden!important; } @media(max-width:760px){ html body #lumora-lobby.lobby-minimal-astral.lobby-section-active .lobby-shell{ height:calc(100dvh - 12px)!important;max-height:calc(100dvh - 12px)!important; } } @media(max-height:680px) and (min-width:761px){ html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-stage{ height:120px!important;min-height:120px!important;flex-basis:120px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-frame{ height:118px!important;width:min(100%,170px)!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-equipped-list{ flex:1 1 auto!important;max-height:none!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-quote{display:none!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid{ grid-auto-rows:190px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item{ height:190px!important;min-height:190px!important;max-height:190px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-visual{ height:82px!important;min-height:82px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-visual img{ max-height:76px!important; } } /* Same single catalog scroller when inventory is opened during a live room. */ html body #modalBackdrop.open:not(.lumora-page-view)[data-modal-kind="inventory"] > .modal > .modal-body{ overflow:hidden!important;padding:0!important;min-height:0!important; } /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033307.css -------------------------------------------------------------------------- */ /* Lumora 0.33.30.7 — cohesive, viewport-safe polish of the existing real views. No alternate topbar, simulated records, or changes to game/event handlers. */ :root{--ui307-bg:#0c0722;--ui307-card:#160e35;--ui307-card2:#1d1345;--ui307-line:#493781;--ui307-gold:#ffc857;--ui307-purple:#8b5cf6} /* The main Lobby header stays in place. Each section owns its internal scroll. */ html body #lumora-lobby.lobby-section-active{height:100dvh!important;max-height:100dvh!important;overflow:hidden!important} html body #lumora-lobby.lobby-section-active .lobby-shell{min-height:0!important;max-height:calc(100dvh - 24px)!important} html body #lumora-lobby.lobby-section-active .lobby-section-page{min-height:0!important;overflow:hidden!important} /* PROFILE: keep the real Lumi in its own column and let identity occupy the rest. */ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero{ display:grid!important;grid-template-columns:150px minmax(0,1fr)!important; gap:20px!important;align-items:center!important;min-height:0!important; padding:17px 20px!important;background:var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-wrap{ position:relative!important;isolation:isolate!important;grid-column:1!important; display:grid!important;place-items:center!important; width:144px!important;min-width:0!important;height:144px!important;min-height:0!important; margin:0!important;padding:0!important;overflow:visible!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-frame{ display:grid!important;place-items:center!important; width:132px!important;min-width:0!important;height:132px!important;min-height:0!important; border-radius:50%!important;overflow:hidden!important; background:linear-gradient(155deg,#2b2059,#101633)!important;border:1px solid var(--ui307-line)!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main #own-profile-lumi-preview.profile-v2-lumi-preview{ width:114px!important;height:114px!important;max-width:114px!important; transform:scale(.64)!important;transform-origin:center!important;display:grid!important;place-items:center!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-lumi-edit{ right:0!important;bottom:3px!important;left:auto!important;top:auto!important;z-index:2!important; width:32px!important;height:32px!important;border-radius:9px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-ident{ grid-column:2!important;min-width:0!important;width:100%!important; display:flex!important;flex-direction:column!important;justify-content:center!important;gap:8px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-name-line{ min-width:0!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-player-name{ max-width:100%!important;overflow-wrap:anywhere!important;font:800 clamp(20px,2.2vw,28px)/1.15 'Baloo 2','Nunito',sans-serif!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-level-line{margin:0!important;min-height:0!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-level-line strong{font-size:16px!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-xp{ display:flex!important;align-items:center!important;gap:10px!important;max-width:720px!important;width:100%!important;min-width:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-xp-track{flex:1 1 auto!important;min-width:40px!important;width:auto!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-xp > span{flex:0 0 auto!important;white-space:nowrap!important;font-size:10px!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-id-row{ display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;margin:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-id-row span{overflow-wrap:anywhere!important;min-width:0!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-presence{align-self:flex-start!important;margin:0!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats-main{ grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;margin:12px 0!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats article{ min-width:0!important;min-height:75px!important;gap:9px!important;padding:11px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-streak{min-height:82px!important;margin-bottom:12px!important} /* FRIENDS: never squash rows to fit the viewport; scroll the list instead. */ html body #modalBackdrop[data-modal-kind="friends"] .friends-v2{ display:flex!important;flex-direction:column!important;min-height:0!important;height:100%!important; padding:14px 16px!important;gap:10px!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-toolbar{ display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:5px!important;flex:0 0 auto!important; border-bottom:1px solid #2c2060!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-tab{ height:38px!important;min-height:38px!important;padding:0 10px!important; flex:0 0 auto!important;border-radius:8px 8px 0 0!important; background:transparent!important;border:0!important;border-bottom:2px solid transparent!important; color:#b8abd9!important;font-size:12px!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-tab-current{ color:#f1ecff!important;border-bottom-color:var(--ui307-gold)!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-create-group{ height:37px!important;min-height:37px!important;margin-left:auto!important;padding:0 13px!important; border-radius:9px!important;background:var(--ui307-gold)!important;border-color:var(--ui307-gold)!important;color:#2a1a00!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-search-row{ grid-template-columns:auto minmax(0,1fr) auto!important;flex:0 0 auto!important;gap:9px!important;margin:0!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-search, html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-sort select{height:39px!important;min-height:39px!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-list{ display:flex!important;flex-direction:column!important;align-items:stretch!important; flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important; gap:8px!important;overflow-x:hidden!important;overflow-y:auto!important;padding:1px 7px 8px 0!important; scrollbar-width:thin!important;scrollbar-color:var(--ui307-purple) var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-list > .friends-v2-card{ display:grid!important;grid-template-columns:minmax(0,1fr) auto!important; flex:0 0 78px!important;flex-shrink:0!important;height:78px!important;min-height:78px!important;max-height:none!important; width:100%!important;gap:12px!important;padding:8px 12px!important;overflow:visible!important; background:var(--ui307-card)!important;border:1px solid #3e2d6d!important;border-radius:11px!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-main, html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-copy{min-width:0!important;min-height:0!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-avatar{ flex:0 0 48px!important;width:48px!important;height:48px!important;min-width:48px!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-actions{ flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important; } html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-banner{ flex:0 0 auto!important;min-height:58px!important;padding:8px 12px!important;margin:0!important; } /* SHOP: remove the legacy 190px card cap; descriptions and buttons have their own space. */ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2{ grid-template-columns:clamp(224px,23%,272px) minmax(0,1fr)!important;min-height:0!important;height:100%!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel{ min-width:0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important; padding:14px!important;gap:8px!important;background:var(--ui307-card)!important; scrollbar-width:thin!important;scrollbar-color:var(--ui307-purple) var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-stage{ height:176px!important;min-height:176px!important;max-height:176px!important;margin:0!important;flex:0 0 176px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-frame{ width:min(100%,200px)!important;height:174px!important;max-height:174px!important;min-height:0!important; overflow:hidden!important;background:linear-gradient(155deg,#2b2059,#101633)!important;border:1px solid var(--ui307-line)!important;border-radius:13px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-copy{gap:7px!important;min-height:0!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-copy span{min-height:0!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-note{margin-top:4px!important;padding:9px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-quote{margin-top:0!important;padding-top:8px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-content{ min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important; padding:14px!important;gap:0!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-row{ flex:0 0 auto!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;gap:9px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-card{min-width:0!important;min-height:58px!important;padding:8px 10px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-card div{flex-wrap:wrap!important;gap:3px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-wallet-card strong{font-size:18px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-buy-prismas{min-width:140px!important;padding:0 11px!important;font-size:12px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-toolbar{ flex:0 0 auto!important;min-width:0!important;grid-template-columns:minmax(0,1fr) minmax(170px,250px)!important; gap:8px!important;margin-top:10px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-filters{ min-width:0!important;overflow-x:auto!important;scrollbar-width:thin!important;scrollbar-color:var(--ui307-purple) var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-filters::-webkit-scrollbar{display:block!important;height:5px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog{ flex:1 1 auto!important;display:grid!important; grid-template-columns:repeat(auto-fill,minmax(min(100%,202px),1fr))!important; grid-auto-rows:minmax(220px,auto)!important;align-content:start!important; min-width:0!important;min-height:0!important;height:auto!important; margin-top:9px!important;gap:10px!important;padding:2px 7px 12px 1px!important; overflow-x:hidden!important;overflow-y:auto!important; scrollbar-width:thin!important;scrollbar-color:var(--ui307-purple) var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog > .shop-v2-item{ box-sizing:border-box!important;display:flex!important;flex-direction:column!important; width:100%!important;min-width:0!important;height:auto!important;min-height:220px!important;max-height:none!important; padding:11px!important;overflow:hidden!important;background:var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-top{min-width:0!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-item p{ display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important; min-height:0!important;max-height:48px!important;line-height:1.4!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-actions{ display:flex!important;flex:0 0 auto!important;gap:7px!important;margin-top:auto!important;min-height:36px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-item-actions button{min-width:0!important;min-height:34px!important;white-space:normal!important;line-height:1.15!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-footer{flex:0 0 auto!important;min-height:24px!important} /* INVENTORY: fewer, larger cards; stable stage and catalog-only scrollbar. */ html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2{ grid-template-columns:clamp(210px,22%,255px) minmax(0,1fr)!important;min-width:0!important;min-height:0!important;height:100%!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel{ padding:14px!important;gap:9px!important;overflow-y:auto!important;overflow-x:hidden!important; scrollbar-width:thin!important;scrollbar-color:var(--ui307-purple) var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-stage{ flex:0 0 166px!important;height:166px!important;min-height:166px!important;max-height:166px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-frame{ width:min(100%,198px)!important;height:164px!important;min-height:0!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-equipped-list{ grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:220px!important;flex:0 1 auto!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content{ padding:14px!important;min-width:0!important;min-height:0!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content-head{flex-wrap:wrap!important;gap:9px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-head-actions{gap:8px!important;flex-wrap:wrap!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-search{width:clamp(170px,21vw,260px)!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-go-shop{min-width:120px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-filters{margin-top:10px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,188px),1fr))!important; grid-auto-rows:minmax(228px,auto)!important;gap:10px!important; padding:2px 7px 12px 1px!important;margin-top:9px!important; min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid > .inventory-v2-item{ height:auto!important;min-height:228px!important;max-height:none!important;overflow:hidden!important; padding:10px!important;background:var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-visual{ height:112px!important;min-height:112px!important;flex:0 0 112px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-info{ flex:0 0 auto!important;min-height:0!important;padding:7px 1px 5px!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item > button{ flex:0 0 auto!important;min-height:34px!important;height:34px!important;margin-top:auto!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-footer{flex:0 0 auto!important;min-height:23px!important} /* Short screens: do not shrink item cards or profile identity into illegibility. */ @media(max-height:680px) and (min-width:761px){ html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid{grid-auto-rows:minmax(210px,auto)!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid > .inventory-v2-item{min-height:210px!important;height:auto!important;max-height:none!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-item-visual{height:92px!important;min-height:92px!important;flex-basis:92px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog{grid-auto-rows:minmax(216px,auto)!important} } @media(max-width:1000px){ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-stats-main{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-actions{gap:5px!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-chat{min-width:72px!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-remove{min-width:79px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-toolbar{grid-template-columns:minmax(0,1fr)!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-search{max-width:100%!important} } @media(max-width:760px){ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero{ grid-template-columns:92px minmax(0,1fr)!important;gap:9px!important;padding:10px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-wrap, html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-frame{ width:88px!important;height:88px!important;min-width:0!important;min-height:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main #own-profile-lumi-preview.profile-v2-lumi-preview{transform:scale(.49)!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-xp{flex-wrap:wrap!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2{overflow:hidden!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-toolbar{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:thin!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-search-row{grid-template-columns:minmax(0,1fr)!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-list > .friends-v2-card{height:auto!important;min-height:94px!important;flex-basis:auto!important;grid-template-columns:minmax(0,1fr)!important} html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-card-actions{justify-content:flex-end!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;height:100%!important;overflow-y:auto!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel{max-height:220px!important;overflow-y:auto!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-stage{height:100px!important;min-height:100px!important;flex-basis:100px!important} html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-frame{height:98px!important;width:128px!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid, html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog{overflow-y:visible!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))!important} html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content, html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-content{height:auto!important;min-height:300px!important;overflow:visible!important} } /* Narrow desktop: instead of a tiny 100px shop catalog, the right panel owns the vertical scroll. Card actions remain reachable without clipping. */ @media (min-width:761px) and (max-width:900px){ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-content{ display:block!important;height:100%!important;max-height:100%!important; overflow-x:hidden!important;overflow-y:auto!important; scrollbar-width:thin!important;scrollbar-color:var(--ui307-purple) var(--ui307-card)!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog{ display:grid!important;flex:none!important;height:auto!important;min-height:0!important; max-height:none!important;overflow:visible!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,202px),1fr))!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-footer{padding-top:10px!important} } @media(max-height:680px) and (min-width:761px){ /* The promotional banner is optional; on laptop-height screens the friend list gets the space so a third person can be seen without squashing rows. */ html body #modalBackdrop[data-modal-kind="friends"] .friends-v2-banner{display:none!important} } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main #own-profile-lumi-preview.profile-v2-lumi-preview{transform:scale(.78)!important} @media(max-width:760px){ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main #own-profile-lumi-preview.profile-v2-lumi-preview{transform:scale(.49)!important} } /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033308.css -------------------------------------------------------------------------- */ /* LUMORA 0.33.30.8 — cohesive profile/preview, scrolling and overlay hotfix. CSS only: no gameplay, economy or authoritative-state modifications. */ :root{--ui308-purple:#8b5cf6;--ui308-line:#493781;--ui308-panel:#160e35;--ui308-gold:#ffc857} /* One official top bar: account dropdown is above every Lobby section. */ html body #lumora-lobby.lobby-minimal-astral.lobby-section-active .lobby-v2-topbar{ position:relative!important;isolation:isolate!important;z-index:99990!important;overflow:visible!important; } html body #lumora-lobby.lobby-minimal-astral .lobby-account-wrap{position:relative!important;z-index:99991!important;overflow:visible!important} html body #lumora-lobby.lobby-minimal-astral #lobby-account-menu{position:absolute!important;z-index:99992!important;overflow:visible!important} html body #lumora-lobby.lobby-minimal-astral .lobby-shell{isolation:auto!important} html body #lumora-lobby #modalBackdrop.lumora-page-view{z-index:1!important} /* All real previews center the CANVAS within the stage, not the empty host. No inherited translateX values: both skins and equipped cosmetics share the same anchor. */ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-stage, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-stage{ display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-frame, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-frame{ position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important; width:min(100%,208px)!important;height:182px!important;min-height:0!important;max-height:none!important; margin:0 auto!important;overflow:hidden!important;background:linear-gradient(155deg,#2b2059,#101633)!important; border:1px solid var(--ui308-line)!important;border-radius:14px!important;filter:none!important;box-shadow:none!important; } html body #modalBackdrop[data-modal-kind="shop"] #shopLumiSpritePreview, html body #modalBackdrop[data-modal-kind="inventory"] #inventoryLumiSpritePreview{ position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;height:100%!important;min-width:0!important;min-height:0!important; margin:0!important;padding:0!important;transform:none!important;transform-origin:center center!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="shop"] #shopLumiSpritePreview .lumi-real-preview-canvas, html body #modalBackdrop[data-modal-kind="inventory"] #inventoryLumiSpritePreview .lumi-real-preview-canvas{ display:block!important;flex:none!important;width:100%!important;max-width:200px!important;height:auto!important;max-height:170px!important; object-fit:contain!important;margin:auto!important;transform:none!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel{align-items:stretch!important} /* A visible lower gutter is part of the scrollable catalogue, never clipped by its footer. */ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid{ row-gap:16px!important;column-gap:11px!important;padding-bottom:28px!important;scroll-padding-bottom:25px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog>.shop-v2-item, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-grid>.inventory-v2-item{ margin-bottom:0!important; } /* The Clareira right-hand card gets its own scroll, independently of main content. */ html body #modalBackdrop[data-modal-kind="clearing"] .clearing-layout{min-height:0!important;overflow:hidden!important} html body #modalBackdrop[data-modal-kind="clearing"] .clearing-side{ display:flex!important;flex-direction:column!important;min-height:0!important;max-height:100%!important; overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important; scrollbar-width:thin!important;scrollbar-color:var(--ui308-purple) var(--ui308-panel)!important; } html body #modalBackdrop[data-modal-kind="clearing"] .clearing-side>*{flex-shrink:0!important} html body #modalBackdrop[data-modal-kind="clearing"] .clearing-side-quote{margin-top:auto!important;padding-bottom:15px!important} html body #modalBackdrop[data-modal-kind="clearing"] .clearing-side::-webkit-scrollbar{width:8px!important} html body #modalBackdrop[data-modal-kind="clearing"] .clearing-side::-webkit-scrollbar-thumb{background:var(--ui308-purple);border-radius:9px;border:2px solid var(--ui308-panel)} /* Own profile: competition on LEFT, identity on RIGHT in the requested exact order. */ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main{ display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr)!important; grid-template-rows:auto auto auto minmax(0,1fr)!important;align-content:start!important;align-items:start!important; column-gap:15px!important;row-gap:12px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-hero{ grid-column:2!important;grid-row:1 / span 4!important;width:100%!important;min-height:0!important; display:block!important;padding:18px!important;align-self:start!important;position:relative!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-stats-main{ grid-column:1!important;grid-row:1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; margin:0!important;align-self:start!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-streak{ grid-column:1!important;grid-row:2!important;margin:0!important;min-height:104px!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-rates{ grid-column:1!important;grid-row:3!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; margin:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero>.profile-v2-ident{ display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important; width:100%!important;gap:10px!important;min-width:0!important;grid-column:auto!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-name-line{ order:1!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-id-row{ order:2!important;justify-content:center!important;flex-wrap:wrap!important;text-align:center!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-title-row{ order:3!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-title-row .profile-v2-title-badge{margin:0!important;max-width:100%!important;overflow-wrap:anywhere!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-wrap{ order:4!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;min-width:0!important;height:183px!important;min-height:183px!important; margin:0!important;padding:0!important;overflow:visible!important;grid-column:auto!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-hero .profile-v2-lumi-frame{ display:flex!important;align-items:center!important;justify-content:center!important; width:188px!important;height:178px!important;min-width:0!important;min-height:0!important; margin:auto!important;border-radius:16px!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main #own-profile-lumi-preview.profile-v2-lumi-preview{ display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;max-width:none!important;height:100%!important;margin:0!important; transform:none!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="profile"] #own-profile-lumi-preview .lumi-real-preview-canvas{ width:100%!important;max-width:188px!important;height:auto!important;max-height:170px!important;object-fit:contain!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-lumi-edit{right:3px!important;bottom:4px!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-level-line{ order:5!important;text-align:center!important;margin:0!important;align-self:center!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-xp{order:6!important;max-width:100%!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main .profile-v2-presence{order:7!important;align-self:center!important;margin-top:3px!important} /* Public profile uses identical identity/competition distribution, with real public data. */ html body #modalBackdrop[data-modal-kind="playerProfile"]>.modal{ width:min(1220px,calc(100vw - 28px))!important;max-width:1220px!important; height:min(820px,calc(100dvh - 28px))!important;max-height:calc(100dvh - 28px)!important; overflow:hidden!important;background:#0c0722!important;border-radius:17px!important;border:1px solid var(--ui308-line)!important; } html body #modalBackdrop[data-modal-kind="playerProfile"]>.modal>.modal-head{background:#160e35!important;background-image:none!important;min-height:72px!important} html body #modalBackdrop[data-modal-kind="playerProfile"]>.modal>.modal-body{min-height:0!important;overflow-y:auto!important;scrollbar-width:thin!important;scrollbar-color:var(--ui308-purple) var(--ui308-panel)!important} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-v2{ display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr)!important;gap:15px!important; min-width:0!important;align-items:start!important;padding:16px!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:12px} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive>h3{margin:0;font:800 19px 'Baloo 2','Nunito',sans-serif;color:#f1ecff} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0!important} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0!important} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats article{min-width:0;overflow:hidden} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak{min-height:100px;margin:0} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-identity{ grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:11px; align-items:center;text-align:center;padding:17px;border-radius:14px;border:1px solid var(--ui308-line);background:var(--ui308-panel); } html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-name{font:800 27px/1.15 'Baloo 2','Nunito',sans-serif;color:#fff;overflow-wrap:anywhere} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-id{font-size:11px;color:#ad9fcf;overflow-wrap:anywhere} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-lumi{ width:188px;height:178px;max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden; background:linear-gradient(155deg,#2b2059,#101633);border:1px solid var(--ui308-line);border-radius:15px; } html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-lumi .lumi-real-preview-canvas{width:100%;height:auto;max-height:172px;object-fit:contain} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-level{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;font-size:12px} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-level span{font-size:10px;color:#ad9fcf} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-identity>.profile-v2-xp-track{width:100%;min-height:8px;height:8px;overflow:hidden;background:#0c0722;border-radius:9px} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-identity>.profile-v2-xp-track>.profile-v2-xp-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#6ad4ff)} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-actions{border:1px solid var(--ui308-line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px;background:var(--ui308-panel)} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-actions>div{display:flex;flex-wrap:wrap;gap:8px} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-actions>div button{flex:1 1 135px;min-width:0} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-actions small{color:#ad9fcf} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-achievements{margin:0!important} /* Portaled achievements is a direct child of backdrop and covers the profile HEADER too. */ html body #modalBackdrop > #profile-achievements-modal.profile-v2-achievements{ position:absolute!important;inset:0!important;z-index:100005!important;display:none!important; align-items:center!important;justify-content:center!important;padding:16px!important; background:rgba(5,3,24,.83)!important;backdrop-filter:blur(6px)!important; } html body #modalBackdrop > #profile-achievements-modal.profile-v2-achievements.open{display:flex!important} html body #modalBackdrop > #profile-achievements-modal .profile-v2-achievements-card{ width:min(920px,calc(100vw - 35px))!important;max-height:calc(100dvh - 36px)!important; display:flex!important;flex-direction:column!important;overflow:hidden!important; } html body #modalBackdrop > #profile-achievements-modal .profile-achievements-content{flex:1 1 auto;min-height:0;overflow-y:auto!important} @media(max-width:850px){ html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-v2{grid-template-columns:minmax(0,1fr)!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-hero, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-identity{grid-column:1!important;grid-row:1!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-stats-main{grid-column:1!important;grid-row:2!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-streak{grid-column:1!important;grid-row:3!important} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-rates{grid-column:1!important;grid-row:4!important} html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive{grid-column:1;grid-row:2} html body #modalBackdrop[data-modal-kind="profile"] .profile-v2-main>.profile-v2-stats-main, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* Historical >.modal >.modal-body specificity requires equal or stronger selectors. */ html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main{ display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr)!important; grid-template-rows:auto auto auto minmax(0,1fr)!important;align-content:start!important; align-items:start!important;gap:12px 15px!important; } html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main > .profile-v2-hero{ display:block!important;grid-template-columns:none!important;grid-column:2!important;grid-row:1 / span 4!important; } html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-frame, html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel .shop-v2-preview-frame{ display:flex!important;align-items:center!important;justify-content:center!important; width:min(100%,208px)!important;height:182px!important;min-height:0!important;max-height:none!important; margin:0 auto!important;overflow:hidden!important;background:linear-gradient(155deg,#2b2059,#101633)!important; border:1px solid var(--ui308-line)!important;border-radius:14px!important;filter:none!important;box-shadow:none!important; } @media(max-width:850px){ html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main{ grid-template-columns:minmax(0,1fr)!important; } html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main > .profile-v2-hero{ grid-column:1!important;grid-row:1!important; } } @media(max-width:850px){ html body #modalBackdrop[data-modal-kind="clearing"] .clearing-layout{ display:block!important;overflow-y:auto!important;scrollbar-width:thin!important; scrollbar-color:var(--ui308-purple) var(--ui308-panel)!important; } html body #modalBackdrop[data-modal-kind="clearing"] .clearing-side{ margin-top:12px!important;min-height:180px!important;max-height:250px!important; } } @media(max-width:850px){ html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main > .profile-v2-hero{ grid-row:1 / 2!important; } } @media(max-width:850px){ html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2 > .profile-v2-main{ grid-template-rows:max-content max-content max-content max-content!important; align-content:start!important; } } /* Stage and frame have matching heights; no overlap with Equipped now/description. */ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-preview-panel .shop-v2-preview-stage, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-preview-panel .inventory-v2-preview-stage{ flex:0 0 190px!important;height:190px!important;min-height:190px!important;max-height:190px!important; margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important; } /* -------------------------------------------------------------------------- Origem consolidada: inner-screens-033309.css -------------------------------------------------------------------------- */ /* LUMORA 0.33.30.9 — incremental corrections atop the full 0.33.30.8. Shared real profile layout; Clareira right scroll; distinct catalogue rows. */ /* Override the old clearing-specific overflow:hidden rule with equal-or-higher specificity. It was winning over the 0.33.30.8 scroll fix. */ html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-app{ min-height:0!important;height:100%!important; grid-template-rows:max-content minmax(0,1fr)!important; } html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-layout{ min-height:0!important;height:100%!important;max-height:100%!important; overflow:hidden!important;align-items:stretch!important; } html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side{ display:flex!important;flex-direction:column!important;box-sizing:border-box!important; min-width:0!important;min-height:0!important;height:100%!important;max-height:100%!important; padding:18px 13px 24px!important;overflow-x:hidden!important;overflow-y:auto!important; overscroll-behavior:contain!important;scrollbar-width:thin!important; scrollbar-color:#9872ec #160e35!important;scrollbar-gutter:stable!important; } html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side > *{flex-shrink:0!important} html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side nav{flex-shrink:0!important;width:100%!important} html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side-quote{ margin-top:18px!important;flex-shrink:0!important;padding-bottom:16px!important; } html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side::-webkit-scrollbar{width:8px!important} html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side::-webkit-scrollbar-track{background:#160e35!important;border-radius:9px!important} html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="clearing"] .clearing-side::-webkit-scrollbar-thumb{background:#8963d2!important;border:2px solid #160e35!important;border-radius:9px!important} /* A real gap between successive horizontal rows, independent of older grid gap/card-height rules. Never put the gap outside the scroller's clipped end. */ html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid{ display:grid!important;align-content:start!important;row-gap:23px!important; column-gap:12px!important;padding:5px 9px 34px 3px!important; scroll-padding-bottom:32px!important; } html body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog > .shop-v2-item, html body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid > .inventory-v2-item{ margin:0!important;min-width:0!important; } /* The own profile now uses exactly the public profile's real two-column DOM; no competing legacy sidebar/hero grid can compress its content. */ html body #modalBackdrop[data-modal-kind="profile"] > .modal{ width:min(1220px,calc(100vw - 28px))!important;max-width:1220px!important; height:min(820px,calc(100dvh - 28px))!important;max-height:calc(100dvh - 28px)!important; overflow:hidden!important;border-radius:17px!important; } html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body{ min-height:0!important;overflow-y:auto!important;padding:0!important; scrollbar-width:thin!important;scrollbar-color:#8b5cf6 #160e35!important; } html body #modalBackdrop[data-modal-kind="profile"] .profile-v2.own-profile-shell{ display:block!important;height:auto!important;min-height:0!important;width:100%!important; max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important; border:0!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public{ display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr)!important; gap:15px!important;min-width:0!important;align-items:start!important; padding:16px!important;margin:0!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public > .public-profile-competitive{ grid-column:1!important;grid-row:1!important;min-width:0!important;display:flex!important; flex-direction:column!important;gap:12px!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public > .own-profile-identity{ grid-column:2!important;grid-row:1!important;min-width:0!important;display:flex!important; flex-direction:column!important;gap:11px!important;align-items:center!important;text-align:center!important; padding:17px!important;background:#160e35!important;border:1px solid #493781!important; border-radius:14px!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-identity > .own-profile-name-line{ display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important; width:100%!important;flex-wrap:wrap!important;margin:0!important;min-width:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-identity .public-profile-name{ font:800 27px/1.15 'Baloo 2','Nunito',sans-serif!important;color:#fff!important; max-width:100%!important;overflow-wrap:anywhere!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-id{ display:flex!important;align-items:center!important;justify-content:center!important; gap:8px!important;flex-wrap:wrap!important;width:100%!important;font-size:11px!important; color:#ad9fcf!important;overflow-wrap:anywhere!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-title-row{ display:flex!important;align-items:center!important;justify-content:center!important; gap:8px!important;flex-wrap:wrap!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-lumi.public-profile-lumi{ position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important; width:188px!important;height:178px!important;max-width:100%!important;margin:0 auto!important; min-width:0!important;min-height:0!important;padding:0!important;overflow:hidden!important; border:1px solid #493781!important;border-radius:15px!important; background:linear-gradient(155deg,#2b2059,#101633)!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-lumi .profile-v2-lumi-frame{ display:flex!important;justify-content:center!important;align-items:center!important; width:100%!important;height:100%!important;min-width:0!important;min-height:0!important; margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;overflow:hidden!important; background:transparent!important; } html body #modalBackdrop[data-modal-kind="profile"] #own-profile-lumi-preview.profile-v2-lumi-preview{ display:flex!important;justify-content:center!important;align-items:center!important; width:100%!important;height:100%!important;min-width:0!important;margin:0!important; padding:0!important;transform:none!important; } html body #modalBackdrop[data-modal-kind="profile"] #own-profile-lumi-preview .lumi-real-preview-canvas{ display:block!important;max-width:180px!important;width:100%!important;max-height:168px!important; height:auto!important;object-fit:contain!important;margin:auto!important;transform:none!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-lumi #profile-inventory-pencil{ position:absolute!important;right:5px!important;bottom:5px!important;z-index:2!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-identity > .public-profile-level{ display:flex!important;justify-content:space-between!important;gap:10px!important; align-items:center!important;width:100%!important;margin:0!important;font-size:12px!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-identity > .public-profile-level > span{ font-size:10px!important;color:#ad9fcf!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-identity > .profile-v2-xp-track{ width:100%!important;min-height:8px!important;height:8px!important;flex:none!important; margin:0!important;overflow:hidden!important;border-radius:9px!important;background:#0c0722!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-identity > .profile-presence-card{ align-self:center!important;margin:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-rates{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:0!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats article{ min-width:0!important;overflow:hidden!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak{ margin:0!important;min-height:100px!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .own-profile-achievements{ margin:0!important;display:grid!important;gap:9px!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-achievements-button{ display:inline-flex!important;align-items:center!important;justify-content:center!important; gap:8px!important;min-height:38px!important;width:max-content!important;max-width:100%!important; padding:8px 15px!important;border:1px solid #8660c4!important;border-radius:10px!important; background:#322052!important;color:#f4e8ff!important;font-weight:800!important;cursor:pointer!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-achievements-button:hover{ background:#56328a!important;border-color:#ffc857!important; } /* Perfil próprio e público usam o mesmo X oficial da Biblioteca de Fragmentos. */ html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="playerProfile"]) > .modal > .modal-head{ display:flex!important;align-items:center!important;gap:12px!important; } html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="playerProfile"]) > .modal > .modal-head > .close-modal{ position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important; display:grid!important;place-items:center!important;flex:0 0 35px!important;width:35px!important;height:35px!important; min-width:35px!important;min-height:35px!important;max-width:35px!important;max-height:35px!important; margin:0 0 0 auto!important;padding:0!important;border-radius:9px!important; background:#1d1345!important;border:1px solid #493781!important;color:#d9cef3!important; font:800 24px/1 'Nunito',sans-serif!important;text-align:center!important;z-index:2!important; box-shadow:none!important;transform:none!important; } html body #modalBackdrop:is([data-modal-kind="profile"],[data-modal-kind="playerProfile"]) > .modal > .modal-head > .close-modal:hover{ background:#3b2148!important;border-color:#ff7a90!important;color:#ff7a90!important; } @media(max-width:850px){ html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public{ grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public > .own-profile-identity{ grid-column:1!important;grid-row:1!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public > .public-profile-competitive{ grid-column:1!important;grid-row:2!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* Legacy v0.33.30.6 targets the full modal > body > profile chain and forced a 52px + 1fr grid even after the sidebar was removed. Override that exact chain so the actual public-style content contributes to scrollHeight. */ html body #modalBackdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2.own-profile-shell{ position:relative!important;display:block!important;grid-template:none!important; grid-template-columns:none!important;grid-template-rows:none!important; height:auto!important;min-height:0!important;max-height:none!important; width:100%!important;padding:0!important;margin:0!important; overflow:visible!important;align-items:initial!important; } html:not(.lumora-mobile-device) body #modalBackdrop.modal-backdrop[data-modal-kind="profile"] > .modal > .modal-body > .profile-v2.own-profile-shell{ display:block!important;grid-template:none!important;height:auto!important;min-height:0!important; max-height:none!important;overflow:visible!important; } /* The old shop stylesheet fixed each grid row at 190px while a later patch made cards at least 220px high. That made successive rows overlap even when row-gap was set. Size tracks from their actual cards instead. */ html:not(.lumora-mobile-device) body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog, html:not(.lumora-mobile-device) body #modalBackdrop[data-modal-kind="inventory"] .inventory-v2-content .inventory-v2-grid{ grid-auto-rows:max-content!important;row-gap:23px!important;align-content:start!important; } html:not(.lumora-mobile-device) body #modalBackdrop[data-modal-kind="shop"] .shop-v2-catalog > .shop-v2-item{ height:auto!important;min-height:228px!important;max-height:none!important;align-self:stretch!important; } /* 0.33.30.10 — own profile visual parity with public profile. */ html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main > article:nth-child(1) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main > article:nth-child(1) > i{color:#c082ff!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main > article:nth-child(2) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main > article:nth-child(2) > i{color:#ffd34f!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main > article:nth-child(3) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main > article:nth-child(3) > i{color:#76d8ff!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main > article:nth-child(4) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main > article:nth-child(4) > i{color:#ff7daf!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-stats-main > article:nth-child(5) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-stats-main > article:nth-child(5) > i{color:#cb8bff!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-rates > article:nth-child(1) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-rates > article:nth-child(1) > i{color:#c98bff!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-rates > article:nth-child(2) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-rates > article:nth-child(2) > i{color:#ffd75a!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-rates > article:nth-child(3) > i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-rates > article:nth-child(3) > i{color:#78ddff!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak{ position:relative!important;overflow:hidden!important; background: linear-gradient(90deg,rgba(21,11,55,.82) 0%,rgba(21,11,55,.5) 38%,rgba(21,11,55,.28) 100%), url('/assets/ui/profile/profile-streak-banner.webp') center center/cover no-repeat!important; border:1px solid #6a4a18!important;box-shadow:inset 0 0 0 1px rgba(255,215,90,.14)!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak > *, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak > *{position:relative!important;z-index:1!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak::after, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak::after{ content:'';position:absolute;inset:0!important;pointer-events:none!important; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 44%,rgba(5,4,18,.16)); } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak-icon, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak-icon{ display:flex!important;align-items:center!important;justify-content:center!important; width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important; color:#fff!important;background:rgba(24,16,56,.86)!important;border:2px solid #d9b54f!important; border-radius:50%!important;box-shadow:0 0 0 3px rgba(255,200,87,.1)!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak-icon i, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak-icon i{ color:#fff!important;font-size:24px!important;text-shadow:0 2px 10px rgba(255,255,255,.18)!important; } html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak small, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak small{color:#ffdd63!important;font-weight:800!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak-value strong, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak-value strong{color:#ffe062!important} html body #modalBackdrop[data-modal-kind="profile"] .own-profile-public .profile-v2-streak-value span, html body #modalBackdrop[data-modal-kind="playerProfile"] .public-profile-competitive .profile-v2-streak-value span{color:#d7c9ff!important} html body #modalBackdrop[data-modal-kind="profile"] #profile-copy-id{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:auto!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important; box-shadow:none!important;border-radius:0!important;color:#f2ebff!important;cursor:pointer!important; } html body #modalBackdrop[data-modal-kind="profile"] #profile-copy-id:hover, html body #modalBackdrop[data-modal-kind="profile"] #profile-copy-id:focus-visible{color:#ffd75a!important;outline:none!important} html body #modalBackdrop[data-modal-kind="profile"] #profile-copy-id i{font-size:17px!important} /* -------------------------------------------------------------------------- 0.34.0.5 — contrato de viewport dos modais Alpha. Mantém cabeçalho acessível e delega o excesso vertical ao corpo rolável. -------------------------------------------------------------------------- */ html body #modalBackdrop:not(.lumora-page-view)[data-modal-kind] > .modal{ max-width:calc(100vw - 20px)!important; max-height:calc(100dvh - 20px)!important; } html body #modalBackdrop:not(.lumora-page-view)[data-modal-kind] > .modal > .modal-head{ position:relative!important;z-index:4!important;flex:0 0 auto!important; } html body #modalBackdrop:not(.lumora-page-view)[data-modal-kind] > .modal > .modal-body{ min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important; } @media (min-width:760px) and (max-height:760px){ html body #modalBackdrop:not(.lumora-page-view)[data-modal-kind]{padding:7px!important} html body #modalBackdrop:not(.lumora-page-view)[data-modal-kind] > .modal{ height:calc(100dvh - 14px)!important;max-height:calc(100dvh - 14px)!important; } html body #modalBackdrop:not(.lumora-page-view)[data-modal-kind] > .modal > .modal-head{ min-height:54px!important;padding-top:8px!important;padding-bottom:8px!important; } } @media (min-width:851px) and (max-height:700px){ html body #modalBackdrop.lumora-page-view > .modal{ height:calc(100dvh - 16px)!important;min-height:0!important;margin:8px auto!important; } html body #modalBackdrop.lumora-page-view > .modal > .modal-head{min-height:62px!important;padding:9px 15px!important} }