/* === Mobile responsive layer v2: NO overlay/dimming, desktop unchanged === */
:root{--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{touch-action:manipulation}
.mobile-nav-toggle{display:none}

@media (max-width: 860px){
  body{font-size:15px;overflow-x:hidden;padding-bottom:calc(64px + var(--mobile-safe-bottom))}

  /* Keep the existing top bar visible. No dark overlay, no page dimming. */
  .topbar{position:sticky;top:0;z-index:80;background:#15191e}
  .topbar-inner{padding:8px 12px;gap:8px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topbar-inner::-webkit-scrollbar{display:none}
  .topbar .brand{font-size:18px!important;min-width:max-content}

  /* Floating menu button. It opens the existing left menu only; it does not cover/dim the game. */
  .mobile-nav-toggle{display:inline-flex;position:fixed;right:12px;bottom:calc(12px + var(--mobile-safe-bottom));z-index:130;align-items:center;justify-content:center;min-width:112px;min-height:46px;border-radius:999px;border:1px solid rgba(214,184,90,.55);background:linear-gradient(180deg,#d6b85a,#6d5520);color:#050403!important;font-weight:950;box-shadow:0 8px 18px rgba(0,0,0,.32)}

  .header{display:flex;flex-direction:column;gap:10px;width:100%;max-width:none;margin:8px 0 10px;padding:0 10px}
  .playerbar{grid-template-columns:1fr;gap:12px;padding:12px;overflow:hidden}
  .playerbar > div:first-child{min-width:0}
  .xp-mini{display:block!important;margin:8px 0 0!important;max-width:100%}
  .xp-mini span[title]{width:100%!important;max-width:280px}

  .header-quicklinks,.header-resources{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
  .header-quicklink,.header-resources>div{min-width:0;text-align:center;border-radius:10px;padding:8px 6px;background:rgba(15,18,21,.42);border:1px solid rgba(153,177,196,.12);font-size:12px}
  .header-quicklink span:not(.quick-icon){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .rail{display:block;margin:0;min-width:0}
  .rail label{display:block;margin-bottom:4px;font-size:10px}
  .rail .bar{height:14px;font-size:0}
  .rail .bar strong,.rail .bar{color:transparent}

  .wrap{display:block;width:100%;max-width:none;margin:0;padding:0 10px 24px}
  .content{display:block;width:100%;min-width:0}
  .content>*+*{margin-top:14px}

  /* Existing navigation becomes a simple drawer. No scrim, no opacity layer. */
  .nav{position:fixed;z-index:120;left:0;top:0;bottom:0;width:min(86vw,340px);max-width:340px;border-radius:0 16px 16px 0;transform:translateX(-104%);transition:transform .18s ease;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(18px + var(--mobile-safe-bottom));box-shadow:18px 0 42px rgba(0,0,0,.45)}
  body.mobile-menu-open .nav{transform:translateX(0)}
  .nav .title{position:sticky;top:0;z-index:1;padding:15px 16px;font-size:14px;background:linear-gradient(180deg,#28313a,#171c22)}
  .nav ul{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px}
  .nav li{min-width:0}
  .nav a{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 8px;background:rgba(0,0,0,.16);border:1px solid rgba(153,177,196,.12);font-weight:800;line-height:1.15}
  .support-box{padding:12px}
  .support-box div{margin:7px 0}
  .support-box a{min-height:40px;display:flex;align-items:center;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.035)}

  .banner,.card,.strip,.flash{border-radius:14px}
  .banner,.strip,.card{padding:12px}
  .card{overflow:visible}
  .card h1,.banner h1{font-size:21px;line-height:1.15}
  .card h3{margin:-12px -12px 10px;padding:12px;border-radius:14px 14px 0 0}
  .hero,.shop-hero,.point-shop-hero{height:auto!important;min-height:110px!important;max-height:150px!important}
  .grid{grid-template-columns:1fr!important;gap:12px}

  .btn,button,input[type="submit"],input[type="button"]{min-height:44px;padding:10px 13px;border-radius:11px;font-size:14px;white-space:normal}
  input,select,textarea{width:100%;max-width:100%;min-height:44px;font-size:16px}
  .form{max-width:none}
  .form-row{flex-wrap:wrap;align-items:stretch}
  .form-row>*{flex:1 1 160px}
  .actions,.action-controls{justify-content:stretch}
  .actions .btn,.actions button,.action-controls .btn,.action-controls button{flex:1 1 160px;width:auto;min-width:0}
  .action-row{grid-template-columns:1fr!important;padding:12px}
  .action-controls input[type="number"]{width:100%;min-width:90px}

  .table-wrap,.card:has(table),.strip:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{max-width:100%}
  .table{min-width:640px;font-size:13px}
  .table th,.table td{padding:9px 8px}

  .items-market-table,.items-market-table thead,.items-market-table tbody,.items-market-table tr,.items-market-table th,.items-market-table td{display:block;width:100%}
  .items-market-table thead{display:none}
  .items-market-table tr{padding:10px 12px;border-bottom:1px solid var(--border)}
  .items-market-table td{border:0!important;padding:6px 0!important;background:transparent!important}
  .im-actions-cell{text-align:left!important}
  .im-action-form{width:100%;justify-content:stretch}
  .im-action-form .btn,.im-action-form button{flex:1}
  .im-buy-form input[type="number"]{width:76px;min-width:76px;flex:0 0 76px}

  .market-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .market-tab{justify-content:center;border-radius:12px;text-align:center}
  .mailbox-thread{max-height:58vh;margin:0;padding:8px}
  .mailbox-message{max-width:98%;padding:10px}
  .mailbox-shell{grid-template-columns:1fr!important}
  .point-shop-grid{grid-template-columns:1fr!important}
  .point-shop-wallet{grid-template-columns:1fr!important}
  .point-shop-buyline{grid-column:1 / -1!important}
}

@media (max-width: 520px){
  body{font-size:14px}
  .topbar-inner{font-size:12px}
  .topbar .brand{font-size:17px!important}
  .header{padding:0 8px}
  .wrap{padding:0 8px 22px}
  .header-quicklinks,.header-resources{grid-template-columns:1fr 1fr}
  .header-resources>div:first-child{grid-column:1/-1}
  .stats{grid-template-columns:1fr 1fr}
  .nav{width:min(92vw,330px)}
  .nav ul{grid-template-columns:1fr 1fr}
  .nav a{font-size:13px;padding:8px 6px}
  .market-tabs{grid-template-columns:1fr}
  .card h1,.banner h1{font-size:19px}
  .mobile-nav-toggle{left:auto!important;right:12px!important;width:min(50vw,190px)!important;max-width:190px!important;min-width:132px!important;min-height:42px!important}
  .table{min-width:560px}
  .shop-item-cell,.im-item-cell{gap:9px}
  .shop-icon-frame,.im-icon-frame{width:42px!important;height:42px!important;min-width:42px!important}
  .shop-item-icon,.im-icon-frame .market-item-icon{width:36px!important;height:36px!important}
}

/* === Mobile fix v3: menu opens without any black overlay === */
@media (max-width: 860px){
  .mobile-scrim{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;background:transparent!important}
  html.mobile-menu-open .nav, body.mobile-menu-open .nav{transform:translateX(0)!important}
  .mobile-nav-toggle{pointer-events:auto!important;cursor:pointer!important}
}

/* === Mobile fix v4: keep menu button compact on the right === */
@media (max-width: 860px){
  .mobile-nav-toggle{
    left:auto!important;
    right:12px!important;
    width:min(50vw,190px)!important;
    max-width:190px!important;
    min-width:132px!important;
    min-height:42px!important;
    padding:9px 14px!important;
    box-sizing:border-box!important;
  }
}


/* === Mobile fix v5: give long menu item enough room === */
@media (max-width: 860px){
  .nav li.mobile-menu-wide{grid-column:1 / -1}
  .nav li.mobile-menu-wide a{white-space:nowrap}
}

/* Mobile money panel order fix: bank needs the wide row because balances can be very large. */
@media (max-width: 520px){
  .header-resources > div:nth-child(1){
    order:2;
    grid-column:auto !important;
  }
  .header-resources > div:nth-child(2){
    order:1;
    grid-column:1 / -1 !important;
  }
  .header-resources > div:nth-child(3){
    order:3;
    grid-column:auto !important;
  }
}

/* Give profile pages a little extra breathing room above the floating mobile menu button. */
@media (max-width: 860px){
  body{padding-bottom:calc(96px + var(--mobile-safe-bottom))}
}

/* === Mobile fix v6: put Bank in the wide resource row, then Money/Points below === */
@media (max-width: 860px){
  .header-resources{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-auto-flow:row!important;
  }
  .header-resources > div:nth-child(2){
    order:1!important;
    grid-column:1 / -1!important;
  }
  .header-resources > div:nth-child(1){
    order:2!important;
    grid-column:1 / 2!important;
  }
  .header-resources > div:nth-child(3){
    order:3!important;
    grid-column:2 / 3!important;
  }
}


/* === MafiaEmpire1925 hard-noir visual identity: structural override, not sepia === */
:root{
  --bg:#050608!important;
  --bg-2:#0c0e12!important;
  --bg-3:#030405!important;
  --panel:#101217!important;
  --panel-deep:#08090c!important;
  --panel-hi:#191c23!important;
  --text:#ece8dc!important;
  --text-dim:#aaa79d!important;
  --accent:#c9a84b!important;
  --accent-2:#f1d779!important;
  --gold:#f1d779!important;
  --border:#343640!important;
  --chip:#090a0d!important;
  --button-top:#1b1d23!important;
  --button-bottom:#08090c!important;
  --button-border:#5c5236!important;
  --button-glow:rgba(241,215,121,.18)!important;
}
html,body{background:#050608!important;color:var(--text)!important;}
body{
  background:
    radial-gradient(900px 420px at 50% -180px, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(700px 380px at 82% 16%, rgba(201,168,75,.055), transparent 70%),
    linear-gradient(180deg,#08090c 0%,#050608 46%,#020203 100%)!important;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 18%,transparent 0 34%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.72) 100%);mix-blend-mode:screen;opacity:.42;}
a{color:#e4c86b!important}.topbar{background:linear-gradient(180deg,#11141a,#050608)!important;border-bottom:1px solid #37333a!important;box-shadow:0 8px 28px rgba(0,0,0,.55)!important}.topbar .brand{color:#f5dd83!important;text-shadow:0 2px 0 #000,0 0 18px rgba(241,215,121,.12)!important;letter-spacing:.03em!important}
.playerbar,.stats,.nav,.card,.strip,.banner,.login-shell,.market-intro,.crime-intro,.shop-hero,.point-shop-hero{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.18)),#101217!important;border:1px solid #30333d!important;box-shadow:0 18px 40px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.045)!important;color:var(--text)!important}
.card h1,.banner h1,.card h3,.login-box h2,.login-feed-head h2{color:#f4ecd5!important;text-shadow:0 2px 0 #000!important}.card h3,.nav .title,.login-feed-head{background:linear-gradient(180deg,rgba(241,215,121,.10),rgba(0,0,0,.12))!important;border-bottom:1px solid #343640!important;color:#f1d779!important}.nav a{color:#e9e2ce!important;background:transparent!important;border:1px solid transparent!important}.nav a:hover,.nav a:focus{background:linear-gradient(180deg,rgba(241,215,121,.08),rgba(255,255,255,.02))!important;border-color:rgba(241,215,121,.22)!important;text-decoration:none!important}.support-box{background:#08090c!important;border-top:1px solid #30333d!important}
.table td,.action-row,.login-feed-item,.login-metric,.header-quicklink,.header-resources>div{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.16)),#0b0d11!important;border-color:#30333d!important;color:#e9e2ce!important}.table th,.note,.sub,.breadcrumbs,.action-meta,.login-feed-count,.login-links,.login-trust li{color:#aaa79d!important}.pill{background:#07080a!important;border-color:#343640!important;color:#d7cba4!important}
.btn,button,input[type="submit"],input[type="button"]{background:linear-gradient(180deg,#20232a,#07080b)!important;border-color:#655935!important;color:#f7efd8!important;text-shadow:0 1px 0 #000!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 3px 0 rgba(0,0,0,.62),0 10px 22px rgba(0,0,0,.28)!important}.btn-primary{background:linear-gradient(180deg,#f1d779,#9c7622)!important;border-color:#ffe58a!important;color:#090805!important;text-shadow:0 1px 0 rgba(255,255,255,.34)!important}.btn-outline,.btn-contrast{background:linear-gradient(180deg,#181b21,#08090c)!important;border-color:#5a5f6b!important;color:#f0ead8!important}
input,select,textarea{background:#050608!important;border-color:#393c46!important;color:#f1ecdf!important}input::placeholder,textarea::placeholder{color:#8f8c84!important}.bar{background:#050608!important;border-color:#30333d!important}.bar>i{background:linear-gradient(90deg,#8a712d,#f1d779)!important}.flash{background:linear-gradient(180deg,#111318,#07080a)!important;border-color:#343640!important;color:#e9e2ce!important}.hero{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.76)),radial-gradient(420px 160px at 58% 25%,rgba(241,215,121,.13),transparent 70%),#06070a!important;border-color:#343640!important;color:#aaa79d!important}.login-hero{background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.72)),radial-gradient(520px 280px at 20% 10%,rgba(241,215,121,.12),transparent 70%),#090a0d!important}.login-eyebrow,.login-feed-type{background:rgba(241,215,121,.08)!important;border-color:rgba(241,215,121,.25)!important;color:#f1d779!important}.login-hero h1{color:#fff6db!important}.login-hero p,.login-feed-text{color:#e8dfc8!important}.login-city-art{filter:grayscale(1) contrast(1.15) drop-shadow(0 22px 22px rgba(0,0,0,.72))!important;opacity:.62!important}

/* === ABSOLUTE NOIR OVERRIDE — removes beige/sepia/western palette everywhere === */
:root{
  --bg:#030405!important; --bg-2:#090b0f!important; --bg-3:#010203!important;
  --panel:#0d0f14!important; --panel-deep:#050609!important; --panel-hi:#171a21!important;
  --text:#f1eee6!important; --text-dim:#aaa9a5!important;
  --accent:#d8d8d2!important; --accent-2:#f3f0e6!important; --gold:#d6b85a!important;
  --border:#2e323c!important; --chip:#06070a!important;
  --button-top:#1a1d24!important; --button-bottom:#050609!important; --button-border:#4f5563!important;
}
html,body,#app,.page,.wrap,.content{
  background:#030405!important;
  color:#f1eee6!important;
}
body{
  background:
    radial-gradient(900px 460px at 50% -170px,rgba(255,255,255,.075),transparent 64%),
    radial-gradient(650px 390px at 86% 12%,rgba(98,105,120,.13),transparent 68%),
    linear-gradient(180deg,#090b0f 0%,#050609 48%,#010203 100%)!important;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 20%,transparent 0 30%,rgba(0,0,0,.38) 72%,rgba(0,0,0,.78) 100%)!important;
}
a{color:#d8d8d2!important}.gold{color:#d6b85a!important}
.topbar,.header,.footer{background:linear-gradient(180deg,#10131a,#030405)!important;border-color:#2e323c!important;color:#f1eee6!important;box-shadow:0 10px 34px rgba(0,0,0,.55)!important}
.topbar .brand{color:#f3f0e6!important;text-shadow:0 2px 0 #000,0 0 18px rgba(214,184,90,.18)!important;letter-spacing:.04em!important}
.playerbar,.stats,.nav,.card,.strip,.banner,.flash,.support-box,.layout-newsfeed,
.login-shell,.login-hero,.login-box,.login-metric,.login-feed-item,.login-trust,
.register-panel,.register-hero,.register-feature,.register-trust,
.action-row,.market-card,.shop-card,.crime-card,.point-shop-card,.point-shop-hero,.shop-hero,.market-intro,.crime-intro,
.forum-card,.thread-card,.message-card,.garage-card,.car-card,.property-card,.mission-card,
[class*="panel"],[class*="box"],[class*="card"]{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.22)),#0d0f14!important;
  border-color:#2e323c!important;
  color:#f1eee6!important;
  box-shadow:0 18px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.card h1,.card h2,.card h3,.banner h1,.banner h2,.nav .title,
.login-hero h1,.login-box h2,.login-feed-head h2,.register-hero h1,.register-form-card h2,
.action-title,.shop-title,.market-title,h1,h2,h3{
  color:#f3f0e6!important;text-shadow:0 2px 0 #000!important;
}
.card h3,.nav .title,.login-feed-head,.layout-newsfeed-head{
  background:linear-gradient(180deg,rgba(214,184,90,.09),rgba(0,0,0,.15))!important;
  border-color:#2e323c!important;color:#d6b85a!important;
}
.nav a{background:transparent!important;color:#e9e6db!important;border:1px solid transparent!important}.nav a:hover{background:rgba(214,184,90,.08)!important;border-color:rgba(214,184,90,.22)!important;text-decoration:none!important}
.login-hero,.register-hero{
  background:
    linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.78)),
    radial-gradient(520px 260px at 18% 8%,rgba(255,255,255,.08),transparent 68%),
    radial-gradient(560px 330px at 84% 12%,rgba(214,184,90,.08),transparent 72%),
    #07090d!important;
}
.login-hero:after,.register-hero:after{background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))!important}
.login-eyebrow,.register-eyebrow,.login-feed-type,.pill{
  background:#07080b!important;border-color:#42444d!important;color:#d6b85a!important;
}
.login-hero p,.register-hero p,.sub,.note,.breadcrumbs,.action-meta,.login-feed-count,.login-links,.login-trust li,.register-feature span{color:#aaa9a5!important}
.login-city-art,.register-city{filter:grayscale(1) contrast(1.18) drop-shadow(0 22px 24px rgba(0,0,0,.78))!important;opacity:.56!important}
.table th{color:#aaa9a5!important}.table td,.table tr,.table tbody tr,.table tbody td{
  background:#090b0f!important;border-color:#2e323c!important;color:#f1eee6!important;
}
input,select,textarea{
  background:#030405!important;border-color:#383d49!important;color:#f3f0e6!important;box-shadow:inset 0 1px 4px rgba(0,0,0,.65)!important;
}
input::placeholder,textarea::placeholder{color:#858580!important}
.btn,button,input[type="submit"],input[type="button"],.mobile-nav-toggle{
  background:linear-gradient(180deg,#1b1e25,#050609)!important;
  border-color:#4b505c!important;color:#f3f0e6!important;text-shadow:0 1px 0 #000!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 rgba(0,0,0,.65),0 10px 24px rgba(0,0,0,.28)!important;
}
.btn-primary,.btn.gold,.btn-premium{
  background:linear-gradient(180deg,#d6b85a,#6d5520)!important;border-color:#e9d37a!important;color:#050403!important;text-shadow:0 1px 0 rgba(255,255,255,.3)!important;
}
.btn-outline,.btn-contrast{background:linear-gradient(180deg,#151820,#050609)!important;border-color:#555b68!important;color:#f1eee6!important}
.bar{background:#030405!important;border-color:#2e323c!important}.bar>i{background:linear-gradient(90deg,#73777f,#d6b85a)!important}
svg [fill="#f5ead5"],svg [fill="#b9aa8d"],svg [fill="#e7dcc8"],svg [fill="#f5e6c9"],svg [fill="#d6b85a"],svg [fill="#6d5520"],svg [fill="#050403"]{fill:#d6d2c7!important}
svg stop[stop-color="#f5ead5"],svg stop[stop-color="#b9aa8d"],svg stop[stop-color="#ffe18a"],svg stop[stop-color="#94682b"],svg stop[stop-color="#8f672b"]{stop-color:#d6d2c7!important}
