.pm16-wrap{
  max-width:720px;
  margin:0 auto;
  padding:12px;
  direction:rtl;
  box-sizing:border-box;
}

.pm16-hud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.pm16-hud button{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}

.pm16-hud button:disabled{ opacity:.6; cursor:not-allowed; }

.pm16-time{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.03);
}

.pm16-board{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}

.pm16-card{
  aspect-ratio:1/1;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  display:grid;
  place-items:center;
  font-size:clamp(22px, 5vw, 38px);
  background:#fff;
  user-select:none;
  touch-action:manipulation;
  cursor:pointer;
  position:relative;
}

.pm16-card.down{ background:rgba(0,0,0,.04); }
.pm16-card.matched{ opacity:.7; }

.pm16-card.hint{
  outline:3px solid rgba(0,0,0,.15);
}

.pm16-card .pm16-face{
  font-size: clamp(22px, 5vw, 38px);
  line-height:1;
}

.pm16-msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
}

.pm16-msg.success{ background:rgba(0,160,80,.10); }
.pm16-msg.fail{ background:rgba(220,0,0,.08); }

.pm16-locked{
  padding:14px;
  border:1px dashed rgba(0,0,0,.2);
  border-radius:14px;
  background:rgba(0,0,0,.03);
}

@media (max-width:520px){
  .pm16-hud{ justify-content:stretch; }
  .pm16-hud button{ width:100%; }
  .pm16-board{ gap:8px; }
}
.pm16-center{
  text-align:center;
}

.pm16-btn-login{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  text-decoration:none;
  font-weight:600;
}
.pm16-btn-login:hover{
  opacity:.9;
}