@import url("styles-v1.css");

/* Premium relic family and identity lockup. */
.game-logo{
  width:min(430px,78vw);
  height:80px;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.86)) drop-shadow(0 0 12px rgba(47,236,180,.18));
}

.symbol{
  width:94%;
  height:94%;
  display:grid;
  place-items:center;
  filter:none;
}
.symbol img{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.82)) drop-shadow(0 0 3px rgba(244,202,94,.13));
  transform:translateZ(0);
  pointer-events:none;
}
.tile.portal .symbol{width:96%;height:96%}
.tile.portal .symbol img{filter:drop-shadow(0 0 7px rgba(64,255,207,.72)) drop-shadow(0 3px 2px rgba(0,0,0,.8))}

.tile{
  background:
    radial-gradient(circle at 46% 38%,rgba(42,105,79,.82),rgba(5,28,21,.96) 67%),
    linear-gradient(145deg,#1d4c3b,#04150f);
  border-color:rgba(239,197,91,.42);
  box-shadow:inset 0 1px 1px rgba(255,245,188,.15),inset 0 -7px 12px rgba(0,0,0,.48),0 1px 2px rgba(0,0,0,.45);
}
.tile:before{
  inset:2px;
  border-color:rgba(77,247,194,.1);
  box-shadow:inset 0 0 7px rgba(0,0,0,.28);
}

/* LAST WIN is a real metric row; controls no longer overlap it. */
.meters{margin-bottom:10px}
.meter strong{line-height:1.25}
.actions{align-items:center}
.spin{margin:0 auto}
.controls{overflow:visible;padding-top:6px}

.icon-btn{min-width:44px;width:44px;height:44px}

/* Keep the corner jewels clear of both ribbon labels. */
.rune-steps{transform:translateX(18px)}
#bonusMeter{margin-right:14px}

@media (max-width:600px){
  .topbar{grid-template-columns:44px minmax(0,1fr) 44px}
  .icon-btn{width:44px;height:44px}
  .game-logo{width:min(340px,76vw);height:72px}
  .meters{margin-bottom:9px}
  .controls{padding-top:5px}
  .rune-steps{transform:translateX(36px)}
  #bonusMeter{margin-right:33px}
}

@media (max-width:370px),(max-height:670px){
  .game-logo{width:min(274px,72vw);height:59px}
  .meters{margin-bottom:7px}
  .controls{padding-top:3px}
  .spin{margin:0 auto}
}