.bar{display:none}

@media(max-width:700px){
  .bar{
    position:fixed;
    z-index:50;
    right:8px;
    bottom:max(7px,env(safe-area-inset-bottom));
    left:8px;
    height:74px;
    padding:6px 4px 7px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    overflow:visible;
    border:1px solid color-mix(in srgb,var(--gold,#d7af5b) 76%,#242018);
    border-radius:17px;
    background:linear-gradient(180deg,#171510f7,#050505fa 78%);
    box-shadow:0 8px 30px #000d,inset 0 1px 0 #f4d78366,0 0 18px #d5a74718;
    backdrop-filter:blur(14px);
  }

  .bar:before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-1px;
    right:26%;
    left:26%;
    height:9px;
    border-radius:0 0 18px 18px;
    background:#080807;
  }

  .bar>a{
    min-width:0;
    height:58px;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:flex-end;
    gap:3px;
    color:#fff;
    font-size:10px;
    font-weight:750;
    line-height:1.15;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
  }

  .bar>a>img{
    width:38px;
    height:38px;
    max-width:38px;
    max-height:38px;
    object-fit:contain;
    filter:drop-shadow(0 3px 4px #000a);
  }

  .bar .home{position:relative}

  .dice,
  .bar .home>i{
    position:absolute;
    bottom:15px;
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:0;
    border-radius:14px;
    background:none;
    box-shadow:none;
    font-style:normal;
  }

  .dice:after,
  .bar .home>i:after{display:none}

  .dice img,
  .bar .home>i img{
    width:56px!important;
    height:56px!important;
    max-width:56px!important;
    max-height:56px!important;
    object-fit:contain;
    filter:drop-shadow(0 4px 5px #0009);
    animation:spinDice 4.8s linear infinite;
  }

  .home>span:last-child,
  .bar .home>span:last-child{
    position:relative;
    z-index:2;
    color:#fff;
  }

  .bar>a:active{transform:translateY(1px)}
}

@media(max-width:390px){
  .bar{right:5px;left:5px;height:70px}
  .bar>a{height:55px;font-size:9px}
  .bar>a>img{width:35px;height:35px;max-width:35px;max-height:35px}
  .dice,.bar .home>i{bottom:14px;width:56px;height:56px}
  .dice img,.bar .home>i img{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important}
}

@keyframes spinDice{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .dice img,.bar .home>i img{animation:none!important}
}