/* Mafia MMO UI v4 */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.muted{color:rgba(233,238,246,.68)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(210,177,95,.28);background:rgba(210,177,95,.12);color:#d2b15f;font-size:12px}
.toast{margin:12px 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.75)}
.sep{height:1px;background:rgba(33,48,68,.8);margin:10px 0}
.card{border-radius:18px;padding:14px 14px;border:1px solid rgba(33,48,68,.75);background:linear-gradient(180deg, rgba(18,26,37,.92), rgba(14,20,29,.92));box-shadow:0 12px 30px rgba(0,0,0,.35);margin:12px 0}
.grid{display:grid;gap:12px}
@media(min-width:900px){.grid.two{grid-template-columns:1fr 1fr}}
h1,h2,h3,h4{margin:0 0 10px 0}
p{margin:8px 0}
label{display:block;margin:10px 0 6px 0;color:rgba(233,238,246,.78);font-size:13px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(33,48,68,.9);background:rgba(10,14,20,.55);color:rgba(233,238,246,.95);outline:none}
button{cursor:pointer;padding:10px 12px;border-radius:14px;border:0;background:linear-gradient(180deg, rgba(210,177,95,.95), rgba(174,140,64,.95));color:#0b0f14;font-weight:700;box-shadow:0 10px 20px rgba(0,0,0,.25)}
button{min-height:44px;}
button:hover{filter:brightness(1.05);transform:translateY(-1px)}
button:active{transform:translateY(0);filter:brightness(.98)}
.chip{padding:8px 10px;border-radius:999px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.65);color:rgba(233,238,246,.9);font-size:13px}
.chip:hover{filter:brightness(1.08)}
.chip.danger{border-color:rgba(224,82,82,.45);background:rgba(224,82,82,.12)}
body{
  background: radial-gradient(1200px 600px at 30% -10%, rgba(210,177,95,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(224,82,82,.12), transparent 60%),
              linear-gradient(180deg, #0b0f14, #0f1620);
  color:rgba(233,238,246,.95);
  min-height:100vh;
}

/* --- Tutorial (mobile-first, no popups) --- */
.tutorial-wrap{max-width:560px;margin:0 auto;}
.tutorial-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0 12px;}
.tutorial-title{font-weight:800;letter-spacing:.4px;}
.tutorial-progress{display:flex;gap:6px;}
.pill{width:24px;height:24px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.6)}
.pill.on{background:rgba(210,177,95,.2);border-color:rgba(210,177,95,.5);color:rgba(255,255,255,.9)}
.tutorial-card{margin-bottom:12px;}
.tutorial-card.ghost{opacity:.9}
.lockline{font-size:13px;color:rgba(255,255,255,.65)}
.hint{font-size:13px;color:rgba(255,255,255,.75);margin:8px 0}
.hint.ok{color:rgba(150,255,170,.95)}
.hint.bad{color:rgba(255,130,130,.95)}
.hint.fade{opacity:.15;transition:opacity .6s ease}
.primary{width:100%;min-height:50px;font-size:16px;}
.primary-link{display:block;width:100%;text-align:center;padding:14px 12px;border-radius:16px;border:1px solid rgba(210,177,95,.35);background:rgba(0,0,0,.25);text-decoration:none;color:rgba(255,255,255,.9);font-weight:800}
.subrow{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;}
.result{border-radius:16px;padding:12px 12px;margin:0 0 12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25)}
.result.ok{border-color:rgba(110,255,160,.35);background:rgba(20,60,30,.35)}
.result.warn{border-color:rgba(255,210,110,.35);background:rgba(60,45,20,.35)}
.result.bad{border-color:rgba(255,110,110,.35);background:rgba(60,20,20,.35)}
.result-main{font-weight:800}
.result-flavor{font-size:13px;color:rgba(255,255,255,.75);margin-top:4px}
.banner{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);margin:8px 0 10px}
.list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.list-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);text-decoration:none;color:rgba(255,255,255,.92)}
.list-item:active{transform:scale(.99)}
.dot{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.25)}
.dot.on{background:rgba(110,255,160,.9)}
.chev{margin-left:auto;color:rgba(255,255,255,.55);font-size:20px;line-height:1}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 6px}
.mini{padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.mini.locked{opacity:.75}
.mini-title{font-weight:900;margin-bottom:2px}
.mini-sub{font-size:13px;color:rgba(255,255,255,.65)}
.tutorial-nav{display:flex;gap:10px;margin-bottom:12px}
.tnav{flex:1;text-align:center;padding:12px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);text-decoration:none;color:rgba(255,255,255,.9);font-weight:800}
.tnav.primary{border-color:rgba(210,177,95,.4);background:rgba(210,177,95,.14)}
.respect-row{display:flex;align-items:center;gap:8px}
.respect-num{font-size:12px;color:rgba(255,255,255,.75);min-width:64px}
.respectbar{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.respectbar>div{height:100%;background:rgba(210,177,95,.85)}
.pulse{animation:pulseGold 1.1s ease-out 1}
.pulse-bad{animation:pulseRed 1.1s ease-out 1}
@keyframes pulseGold{0%{box-shadow:0 0 0 rgba(210,177,95,0)}50%{box-shadow:0 0 0 8px rgba(210,177,95,.18)}100%{box-shadow:0 0 0 rgba(210,177,95,0)}}
@keyframes pulseRed{0%{box-shadow:0 0 0 rgba(255,90,90,0)}50%{box-shadow:0 0 0 8px rgba(255,90,90,.18)}100%{box-shadow:0 0 0 rgba(255,90,90,0)}}
.bg-grain{
  position:fixed;inset:0;pointer-events:none;opacity:.12;
  background-image:url('/assets/img/grain.svg');
  mix-blend-mode:overlay;
}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(33,48,68,.65);background:rgba(10,14,20,.35);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:34px;height:34px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.brand-name{font-weight:800;letter-spacing:.3px}
.brand-tag{margin-left:8px;color:rgba(233,238,246,.55);font-size:12px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mobile-menu{margin-left:10px;min-width:42px;height:42px;border-radius:14px;border:1px solid rgba(33,48,68,.75);
  background:rgba(18,26,37,.65);color:rgba(233,238,246,.95);box-shadow:0 10px 20px rgba(0,0,0,.25);
  font-size:18px;line-height:1;}
.mobile-menu:hover{filter:brightness(1.08);transform:none}
.hud{margin:14px auto 0 auto}
.hud{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border-radius:18px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.55);backdrop-filter:blur(10px)}
.hud-left{display:flex;gap:12px;align-items:center}
.avatar{width:44px;height:44px;border-radius:16px;border:1px solid rgba(210,177,95,.28);background:radial-gradient(circle at 30% 30%, rgba(224,82,82,.25), rgba(210,177,95,.18)), linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));box-shadow:0 10px 25px rgba(0,0,0,.35)}
.hud-name{display:flex;gap:8px;align-items:center}
.hud-sub{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:rgba(233,238,246,.72)}
.hud-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stat{min-width:120px;padding:8px 10px;border-radius:16px;border:1px solid rgba(33,48,68,.75);background:rgba(33,48,68,.25)}
.stat-k{font-size:11px;color:rgba(233,238,246,.65)}
.stat-v{font-size:16px;font-weight:800}
.stat.hp{min-width:220px}
.hp-row{display:flex;gap:10px;align-items:center}
.hp-num{font-weight:800}
.hpbar{flex:1;height:10px;border-radius:999px;border:1px solid rgba(33,48,68,.75);background:rgba(255,255,255,.08);overflow:hidden}
.hpbar>div{height:100%;background:linear-gradient(90deg, rgba(56,210,125,.95), rgba(224,82,82,.95))}
.shell{display:grid;gap:14px;margin-top:14px}
@media(min-width:980px){.shell{grid-template-columns:240px 1fr}}
.sidebar{padding:12px;border-radius:18px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.55);backdrop-filter:blur(10px);height:fit-content;position:sticky;top:86px}
.sidebar a{display:block;padding:10px 10px;border-radius:14px;color:rgba(233,238,246,.88)}
.sidebar a:hover{background:rgba(33,48,68,.35)}
.sidebar a.muted{color:rgba(233,238,246,.6)}
.main{padding-bottom:18px}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{color:rgba(233,238,246,.65);font-weight:700;text-align:left;font-size:12px;padding:0 10px}
.table td{background:rgba(18,26,37,.65);border:1px solid rgba(33,48,68,.75);padding:10px;border-left-width:1px}
.table tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
.footer{padding:18px 0;border-top:1px solid rgba(33,48,68,.65);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.small{font-size:13px;color:rgba(233,238,246,.72)}

/* Home / landing (mobile typography + spacing) */
.home-hero__title{margin:0 0 6px;line-height:1.15;letter-spacing:.2px}
.home-hero__tagline{margin:0;opacity:.9;line-height:1.45}
.home-stack{display:grid;gap:12px;margin-top:12px}
.home-panel{padding:14px}
.home-panel__title{margin:0 0 6px}
.home-panel__hint{margin:0 0 10px;opacity:.85;line-height:1.45}
.home-panel__microhint{margin:10px 0 0;opacity:.75;line-height:1.45}
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.home-subactions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.home-subactions .btn{width:100%}
.home-bullets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pill{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);opacity:.9}
.home-list{margin:8px 0 0;padding-left:18px}
.home-list li{margin:6px 0}

@media (max-width: 480px){
  .home-hero__title{font-size:28px}
  .home-hero__tagline{font-size:14px}
}

@media (max-width: 360px){
  .home-actions{grid-template-columns:1fr}
  .home-subactions{grid-template-columns:1fr}
}


/* --- Mobile rehaul: dropdown menu + responsive HUD --- */
@media (max-width: 820px){
  .container{ padding: 12px; }

  /* Top bar + HUD stack nicely */
  .topbar{ position: sticky; top:0; z-index:60; }
  .hud{ flex-direction:column; gap:10px; align-items:stretch; }
  .hud-stats{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hp .hp-row{ flex-direction:column; align-items:stretch; gap:6px; }

  /* Sidebar becomes a dropdown overlay */
  .sidebar{ position: fixed; top:64px; left:12px; right:12px; bottom:auto; height:auto; max-height:70vh;
    z-index:70; overflow:auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display:none;
    border-radius:18px;
    padding:10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
  }
  body.nav-open .sidebar{ display:block; }

  /* Lock page scroll while keeping the menu scrollable */
  body.nav-open{ overflow:hidden; height:100vh; }

  body.nav-open::before{
    content:"";
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    z-index:65;
  }
  .sidebar a{ font-size:14px; padding:12px 12px; }

  /* Menu button */
  .mobile-menu{ display:inline-flex; align-items:center; justify-content:center; }

  /* Layout: remove left rail spacing */
  .shell{ grid-template-columns:1fr !important; }
  .main{ padding-bottom:18px; }

  .grid{ grid-template-columns: 1fr !important; }
  .card{ border-radius: 18px; }
  button{ width:100%; }
}

/* Desktop: hide mobile menu button */
@media (min-width: 821px){
  .mobile-menu{ display:none; }
}

/* Simple flat tables (Highscores) */
.tbl{width:100%;border-collapse:collapse;margin-top:10px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left;font-size:14px}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(233,238,246,.65)}
.tbl tr:hover td{background:rgba(18,26,37,.35)}

/* --- Tutorial (mobile-first, no popups/modals) --- */
.tutorial-nav{display:flex;gap:10px;margin:10px 0 0}
.tnav{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border-radius:16px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.55);color:rgba(233,238,246,.88)}
.tnav.primary{background:linear-gradient(180deg, rgba(210,177,95,.35), rgba(174,140,64,.25));border-color:rgba(210,177,95,.35);font-weight:800}

.tutorial-wrap{max-width:560px;margin:0 auto}
.tutorial-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0 12px}
.tutorial-title{font-weight:900;letter-spacing:.4px}
.tutorial-progress{display:flex;gap:6px}
.pill{width:26px;height:26px;border-radius:999px;border:1px solid rgba(33,48,68,.85);display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(233,238,246,.65);background:rgba(18,26,37,.55)}
.pill.on{border-color:rgba(56,210,125,.55);color:rgba(233,238,246,.95);background:rgba(56,210,125,.12)}

.tutorial-card{padding:14px}
.tutorial-card h2{margin:0 0 8px}
.tutorial-card.ghost{opacity:.85}
.lockline{font-size:13px;color:rgba(233,238,246,.70)}

.hint{font-size:12px;color:rgba(233,238,246,.72);margin:6px 0 10px}
.hint.ok{color:rgba(56,210,125,.95)}
.hint.bad{color:rgba(255,80,80,.95)}
.hint.fade{opacity:0;transition:opacity .45s ease}

.primary{width:100%;min-height:48px;border-radius:18px;font-size:16px}
.primary-link{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;border-radius:18px;border:1px solid rgba(210,177,95,.35);background:rgba(210,177,95,.12);color:rgba(233,238,246,.95);font-weight:900;margin-top:10px}

.subrow{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px}

.result{border-radius:18px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.65);padding:12px;margin:0 0 12px}
.result.ok{border-color:rgba(56,210,125,.45);background:rgba(56,210,125,.12)}
.result.warn{border-color:rgba(210,177,95,.45);background:rgba(210,177,95,.10)}
.result.bad{border-color:rgba(255,80,80,.45);background:rgba(255,80,80,.10)}
.result-main{font-weight:900}
.result-flavor{font-size:12px;color:rgba(233,238,246,.75);margin-top:4px}

.banner{border-radius:18px;border:1px dashed rgba(210,177,95,.35);background:rgba(210,177,95,.10);padding:12px;margin:8px 0 10px}

.list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.list-item{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:18px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.55);color:rgba(233,238,246,.90)}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(233,238,246,.20)}
.dot.on{background:rgba(56,210,125,.95)}
.name{font-weight:900}
.chev{margin-left:auto;color:rgba(233,238,246,.65);font-size:18px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mini{border-radius:18px;border:1px solid rgba(33,48,68,.75);background:rgba(18,26,37,.55);padding:12px}
.mini.locked{opacity:.8}
.mini-title{font-weight:900}
.mini-sub{font-size:12px;color:rgba(233,238,246,.70);margin-top:4px}

.respect-row{display:flex;gap:10px;align-items:center}
.respect-num{font-weight:900}
.respectbar{flex:1;height:10px;border-radius:999px;border:1px solid rgba(33,48,68,.75);background:rgba(255,255,255,.08);overflow:hidden}
.respectbar>div{height:100%;background:linear-gradient(90deg, rgba(210,177,95,.95), rgba(56,210,125,.85));transition:width .6s ease}
.respectbar>div.pulse{animation:pulse 1s ease-in-out 2}

#hpHud.pulse-bad{animation:pulseBad 1.2s ease-in-out 1}
@keyframes pulse{0%{filter:brightness(1)}50%{filter:brightness(1.35)}100%{filter:brightness(1)}}
@keyframes pulseBad{0%{box-shadow:0 0 0 rgba(255,80,80,0)}40%{box-shadow:0 0 0 6px rgba(255,80,80,.18)}100%{box-shadow:0 0 0 rgba(255,80,80,0)}}


/* ===== HOME (Landing + Dashboard cards) ===== */
.home-hero{
  max-width: 760px;
  margin: 18px auto 0;
  padding: 22px;
  border-radius: var(--radius);
}

.home-hero__top{ margin-bottom: 16px; }

.home-hero__title{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.6px;
  line-height: 1.05;
}

.home-hero__tagline{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.45;
  max-width: 52ch;
}

.home-stack{
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.home-panel{
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.home-panel__title{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.2px;
}

.home-panel__hint{
  margin: 0 0 14px;
  color: var(--muted);
}

.home-panel__microhint{
  margin: 12px 0 0;
  color: var(--muted2);
  line-height: 1.4;
}

/* Actions: never crunch on mobile */
.home-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* Logged-in secondary buttons */
.home-subactions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Pills: wrap nicely, no overlap */
.home-bullets{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-weight: 650;
  font-size: 12px;
  line-height: 1;
}

/* List spacing */
.home-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
}
.home-list li{ margin: 8px 0; }

/* Buttons inside home: make them consistent even if global .btn exists */
.home-panel .btn{
  width: 100%;
  text-align: center;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.home-panel .btn:hover{ background: rgba(255,255,255,.09); }

.home-panel .btn.primary{
  border-color: rgba(120,160,255,.35);
  background: rgba(120,160,255,.12);
}

.home-panel .btn.primary:hover{ background: rgba(120,160,255,.18); }

.btn-block{ width: 100% !important; }

/* Desktop/tablet enhancements */
@media (min-width: 640px){
  .home-hero{ padding: 26px; }
  .home-actions{
    grid-template-columns: 1fr 1fr;
  }
  .home-subactions{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px){
  /* If you want the home hero centered but not huge */
  .home-hero{ max-width: 820px; }
}

/* ===== FIX: Mobile menu MUST scroll ===== */
@media (max-width: 820px){

  /* keep page locked */
  body.nav-open{
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  /* dim background */
  body.nav-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 65;
    pointer-events: auto;
  }

  /* sidebar becomes a scrollable sheet */
  .sidebar{
    display: none; /* default closed */
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;              /* below topbar */
    bottom: 12px;           /* THIS makes it have a real height */
    height: auto;
    max-height: none;       /* remove your 70vh cap */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 70;

    /* make sure it feels like a panel */
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
  }

  body.nav-open .sidebar{
    display: block;
  }

  /* make links easier to tap & scroll past */
  .sidebar a{
    padding: 14px 12px;
  }
}


/* ===== Mobile menu scroll fix (paste LAST) ===== */
@media (max-width: 820px){

  /* lock the page behind the menu */
  body.nav-open{
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
  }

  /* background dim layer */
  body.nav-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 65;
  }

  /* make the sidebar a real scrollable sheet */
  .sidebar{
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;     /* below topbar */
    bottom: 12px;  /* THIS gives it real height */
    height: auto;
    max-height: none;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    z-index: 70;
    border-radius: 18px;
  }

  body.nav-open .sidebar{
    display: block;
  }

  /* tap targets */
  .sidebar a{
    padding: 14px 12px;
  }
}