/* LittleWorlds — shared slide-out menu. Used on every page. */

/* header becomes 3 columns so the logo sits dead centre */
.top{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.top .burger{justify-self:start;order:0}
.top .brand{justify-self:center}
.top .ghost,
.top .back{justify-self:end}

/* smaller, outlined Discord button in the header */
.top .ghost{
  border:1px solid var(--edge);border-radius:6px;
  padding:7px 14px;font-size:12px;
  transition:border-color .16s ease,color .16s ease;
}
.top .ghost:hover{border-color:var(--plasma);color:var(--plasma)}

  .burger{
    order:-1;flex:none;
    width:42px;height:42px;padding:11px;
    display:flex;flex-direction:column;justify-content:space-between;
    background:transparent;border:0;cursor:pointer;
  }
  .burger span{
    display:block;height:2px;width:100%;border-radius:2px;
    background:var(--steel-mid);transition:transform .22s ease,opacity .18s ease;
  }
  .burger:hover span{background:var(--plasma)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  .scrim{
    position:fixed;inset:0;z-index:40;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;transition:opacity .24s ease;
  }
  .scrim.show{opacity:1}

  .drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:41;
    width:min(310px,84vw);
    background:#050708;border-right:1px solid var(--edge);
    box-shadow:40px 0 80px -40px #000;
    padding:20px 18px 28px;
    display:flex;flex-direction:column;gap:2px;
    transform:translateX(-104%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .drawer.open{transform:none}
  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--edge);
  }
  .drawer-title{
    font-family:var(--util);font-weight:600;font-size:13px;
    letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  }
  .drawer-close{
    background:transparent;border:0;color:var(--steel-mid);
    font-size:30px;line-height:1;cursor:pointer;padding:0 4px;
  }
  .drawer-close:hover{color:var(--plasma)}
  .drawer > a{
    font-family:var(--body);font-weight:500;font-size:17px;
    color:var(--paper);text-decoration:none;
    padding:13px 12px;border-radius:8px;
    transition:background .16s ease,color .16s ease;
  }
  .drawer > a:hover{background:rgba(53,224,216,.08);color:var(--plasma)}
  .drawer > a.ext{color:var(--muted);font-size:15px}
  .drawer-play{
    display:flex;align-items:center;gap:9px;justify-content:center;
    background:#33D17A !important;color:#032312 !important;
    font-family:var(--util);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:12px;box-shadow:0 0 24px -8px rgba(51,209,122,.7);
  }
  .drawer-play:hover{background:#3ee089 !important}
  .drawer-play svg{width:18px;height:18px}
  .drawer-foot{
    margin-top:auto;padding-top:16px;border-top:1px solid var(--edge);
    display:flex;gap:18px;
  }
  .drawer-foot a{
    font-family:var(--util);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--steel-lo);text-decoration:none;padding:0;
  }
  .drawer-foot a:hover{color:var(--plasma)}